垂直和水平居中的flexbox [重复]
Posted
技术标签:
【中文标题】垂直和水平居中的flexbox [重复]【英文标题】：vertical and horizontal centering flexbox [duplicate] 【发布时间】：2020-03-03 20:57:34 【问题描述】：我尝试将 div 骰子包装器和 Button Horizontaly 和 Verticaly 居中。问题是，如果我将 dice-wrapper 设置为 100% 高度，则可以正常使用骰子，但按钮现在位于底部页。当我将按钮 div 放入骰子 div 时，按钮位于正确的位置，我无法进入骰子下方。
html,
body
height: 100%;
.container
height: 100%;
#dice-wrapper
display: flex;
justify-content: center;
align-items: center;
height: auto;
border: cornflowerblue solid 1px;
.die img
max-width: 7rem;
.btn
display: flex;
border: cornflowerblue solid 1px;
<body>
<div class="container">
<div id="dice-wrapper">
<div class="die">
<input type="checkbox" id="dice-1" name="dice-1" value="dice-1" />
<img src="img/dice-5.png" class="dice1" id="dice-1" />
</div>
<div class="die">
<input type="checkbox" id="dice-2" name="dice-2" value="dice-2" />
<img src="img/dice-5.png" class="dice2" id="dice-2" />
</div>
<div class="die">
<input type="checkbox" id="dice-3" name="dice-3" value="dice-3" />
<img src="img/dice-5.png" class="dice3" id="dice-3" />
</div>
<div class="die">
<input type="checkbox" id="dice-4" name="dice-4" value="dice-4" />
<img src="img/dice-5.png" class="dice4" id="dice-4" />
</div>
<div class="die">
<input type="checkbox" id="dice-5" name="dice-5" value="dice-5" />
<img src="img/dice-5.png" class="dice5" id="dice-5" />
</div>
<div class="die">
<input type="checkbox" id="dice-6" name="dice-6" value="dice-6" />
<img src="img/dice-5.png" class="dice6" id="dice-6" />
</div>
</div>
<div class="btn">
<button class="btn_roll">roll</button>
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
【问题讨论】：
【参考方案1】：试试这个答案。
在这里，我将.die div 包装在一个具有.dies 类的父div 中。并将.dies容器和.btn容器放入#dice-wrapper容器中。
html,
body
height: 100%;
.container
height: 100%;
#dice-wrapper
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
border: cornflowerblue solid 1px;
.dies
display: flex;
flex-direction: row;
.die img
max-width: 7rem;
.btn
display: flex;
flex-direction: row;
border: cornflowerblue solid 1px;
<body>
<div class="container">
<div id="dice-wrapper">
<div class="dies">
<div class="die">
<input type="checkbox" id="dice-1" name="dice-1" value="dice-1" />
<img src="img/dice-5.png" class="dice1" id="dice-1" />
</div>
<div class="die">
<input type="checkbox" id="dice-2" name="dice-2" value="dice-2" />
<img src="img/dice-5.png" class="dice2" id="dice-2" />
</div>
<div class="die">
<input type="checkbox" id="dice-3" name="dice-3" value="dice-3" />
<img src="img/dice-5.png" class="dice3" id="dice-3" />
</div>
<div class="die">
<input type="checkbox" id="dice-4" name="dice-4" value="dice-4" />
<img src="img/dice-5.png" class="dice4" id="dice-4" />
</div>
<div class="die">
<input type="checkbox" id="dice-5" name="dice-5" value="dice-5" />
<img src="img/dice-5.png" class="dice5" id="dice-5" />
</div>
<div class="die">
<input type="checkbox" id="dice-6" name="dice-6" value="dice-6" />
<img src="img/dice-5.png" class="dice6" id="dice-6" />
</div>
</div>
<div class="btn">
<button class="btn_roll">roll</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
【讨论】：
以上是关于垂直和水平居中的flexbox [重复]的主要内容，如果未能解决你的问题，请参考以下文章