如何将这三个按钮从字面上居中在页面中？ [复制]
Posted
技术标签:
【中文标题】如何将这三个按钮从字面上居中在页面中？ [复制]【英文标题】：How can I center these three button literally in the of the page? [duplicate] 【发布时间】：2021-11-27 20:55:12 【问题描述】：我怎样才能使这三个按钮居中，使它们都成为页面的死点？比如页面是 500 × 500，我怎样才能把它们放在 250 × 250 的地方？
<!DOCTYPE html>
<html lang="en">
<div class="game-ui">
<div class="row-1">
<input type="button" class="game-btn" id="btn-0.0" value=" ">
<input type="button" class="game-btn" id="btn-0.1" value=" ">
<input type="button" class="game-btn" id="btn-0.2" value=" ">
</div>
<div class="row-2">
<input type="button" class="game-btn" id="btn-1.0" value=" ">
<input type="button" class="game-btn" id="btn-1.1" value=" ">
<input type="button" class="game-btn" id="btn-1.2" value=" ">
</div><div class="row-3">
<input type="button" class="game-btn" id="btn-2.0" value=" ">
<input type="button" class="game-btn" id="btn-2.1" value=" ">
<input type="button" class="game-btn" id="btn-2.2" value=" ">
</div></div>
</html>【问题讨论】：
【参考方案1】：使用 flex 的justify-content: center; align-items: center; 属性，可以将其居中到.game-ui 的死点。
.game-ui
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
body
margin: 0px;
<!DOCTYPE html>
<html lang="en">
<div class="game-ui">
<div class="row-1">
<input type="button" class="game-btn" id="btn-0.0" value=" ">
<input type="button" class="game-btn" id="btn-0.1" value=" ">
<input type="button" class="game-btn" id="btn-0.2" value=" ">
</div>
<div class="row-2">
<input type="button" class="game-btn" id="btn-1.0" value=" ">
<input type="button" class="game-btn" id="btn-1.1" value=" ">
<input type="button" class="game-btn" id="btn-1.2" value=" ">
</div><div class="row-3">
<input type="button" class="game-btn" id="btn-2.0" value=" ">
<input type="button" class="game-btn" id="btn-2.1" value=" ">
<input type="button" class="game-btn" id="btn-2.2" value=" ">
</div></div>
</html>justify-content 水平居中，align-items 垂直居中。
【讨论】：
以上是关于如何将这三个按钮从字面上居中在页面中？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章