如何在容器中使用flexbox水平和垂直地居中div。在下面的例子中，我想要每个数字都在对方下面(在行中)，这是水平居中。
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
http://codepen.io/anon/pen/zLxBo
用这个:
html, body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
像这样的HTML标记:
<html>
<body>
<main>
<button> abc </button>
<p> something </p>
</main>
</body>
</html>
Html, body {
显示:flex;
对齐项目:中心;
justify-content:中心;
高度:100%;
｝
< html >
身体< >
<大>
<button> ABC </button>
<p> something </p>
主> < /
身体< / >
< / html >
结果:
CODE
HTML:
<div class="flex-container">
<div class="rows">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.rows {
display: flex;
flex-direction: column;
}
其中flex-container div用于垂直和水平居中你的行div，和行div用于分组你的“项目”，并在一个基于列的顺序。
