<div class="aligner"> <div class="aligner-item">…</div> </div>
.aligner {
display: flex;
align-items: center;
justify-content: center;
}
.aligner-item {
max-width: 50%; /*for demo. Use actual width instead.*/
}这是一个演示。
| 财产 | 价值 | 描述 |
|---|---|---|
| align-items | center | This centers the elements along the axis other than the one specified by flex-direction, i.e., vertical centering for a horizontal flexbox and horizontal centering for a vertical flexbox. |
| justify-content | center | 这使元素沿由 指定的轴居中flex-direction。即，对于水平 ( flex-direction: row) flexbox，此为水平居中，而对于垂直 flexbox ( flex-direction: column) flexbox，此为垂直居中） |
以下所有样式都应用于这个简单的布局：
<div id="container"> <div></div> <div></div> <div></div> </div>
这里#container是flex-box。
CSS：
div#container {
display: flex;
flex-direction: row;
justify-content: center;
}结果：
这是一个演示。
CSS：
div#container {
display: flex;
flex-direction: column;
justify-content: center;
}结果：
这是一个演示。
CSS：
div#container {
display: flex;
flex-direction: row;
align-items: center;
}结果：
这是一个演示。
CSS：
div#container {
display: flex;
flex-direction: column;
align-items: center;
}结果：
这是一个演示。
div#container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}结果：
这是一个演示。
div#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}结果：
这是一个演示。