【发布时间】：2019-12-05 02:27:36
【问题描述】：
我正在尝试将此图像置于某些 div 的中心。
无论我如何尝试，图像要么几乎卡在页面中心，要么卡在页面的右侧或左侧。
我已经尝试在 Bootstrap 网格系统的行内使用它，尝试 flex，尝试更改位置属性，但似乎没有什么对我有用。
提前致谢。
html,
body {
font - family: 'Arimo', sans - serif;
height: 100 % ;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
height: 95 % ;
}
/*buttons*/
.button1 {
background - color: #0CCE6B;
border: black 2px solid;
}
.button2 {
background-color: white;
border: black 2px solid;
}
.button3 {
background-color: # 0 CCE6B;
border: black 2 px solid;
}
/*Player panels*/
.playerOne,
.playerTwo {
height: 100 % ;
width: 50 % ;
margin: 0;
padding: 0;
}
.playerOne {
float: left;
}
.playerTwo {
background - color: white;
float: right;
}
h1 {
text - align: center;
font - size: 4 rem;
padding - top: 30 % ;
}
h2 {
text - align: center;
font - size: 4 rem;
color: #EF2D56;
}
h3 {
text - align: center;
margin - top: 5 rem;
font - size: 2 rem;
}
h4 {
text - align: center;
color: #EF2D56;
font - size: 2 rem;
}
/*Images*/
img {
width: 3 rem;
height: 3 rem;
position: absolute;
}
/*Help Modal*/
.helpModal {
position: absolute;
}
#
modalHeader {
color: black;
}
.modal - body {
font - size: 1 rem;
text - align: center;
color: black;
}
/*change content dependant on active player or the winner*/
.active {
background - color: #0CCE6B;
}
.toggle {
background-color: white;
}
# winner {
position: absolute;
width: 60 rem;
height: 30 rem;
visibility: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dice Game</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Arimo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/all.css">
</head>
<body>
<div class="wrapper">
<div class="modalButton">
<button type="button" class="btn helpModal" data-toggle="modal" data-target="#helpModal">
<i class="fas fa-question-circle fa-5x"></i>
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h2 id="modalHeader">Aim of the game</h2>
<p><strong>Be the first player to reach a 100 global score.</strong></p>
<ul style="list-style-type:square;">
<li>This game has two players playing in rounds.</li>
<li>On each turn a player rolls a dice as many times as they wish. Each roll adds to their round score
</li>
<li>If the player rolls a 1, they lost their round score. It is then the other players turn.</li>
<li>The player can choose to hold. Which means that their round score is added to their global score.</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="playerOne active">
<h1 id="name-0">PLAYER 1</h1>
<h2 id="roundScore-0">0</h2>
<h3>CURRENT SCORE</h3>
<h4 id="score-0">0</h4>
</div>
<div class="playerTwo">
<h1 id="name-1">PLAYER 2</h1>
<h2 id="roundScore-1">0</h2>
<h3>CURRENT SCORE</h3>
<h4 id="score-1">0</h4>
</div>
<img src="images/dice-1.png" alt="dice" id='dice'>
<div class="container-fluid buttonGroup">
<div class="row text-center">
<div class="col-4 button1">
<button type="button" class="btn " id="newGame"><i class="fas fa-gamepad"></i> NEW GAME</button>
</div>
<div class="col-4 button2">
<button type="button" class="btn" id="rollDice"><i class="fas fa-redo"></i>ROLL DICE</button>
</div>
<div class="col-4 button3">
<button type="button" class="btn" id="hold"><i class="fas fa-hand-paper"></i>HOLD</button>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>请查看图片，了解我希望骰子图片出现在屏幕上的位置。
理想情况下，我希望它具有响应性，以便无论视口大小如何，它都保持在同一位置。
谢谢
【问题讨论】：
标签： html css bootstrap-4