CSS 动态垂直和水平居中（align-items、justify-content）
例子
简单示例（将单个元素居中）
HTML
<div class="aligner"><div class="aligner-item">…</div>
</div>
CSS
.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。
示例：justify-content: center在水平 flexbox 上
CSS：
div#container { display: flex;
flex-direction: row;
justify-content: center;
}
结果：
这是一个演示。
示例：justify-content: center在垂直 flexbox 上
CSS：
div#container { display: flex;
flex-direction: column;
justify-content: center;
}
结果：
这是一个演示。
示例：align-content: center在水平 flexbox 上
CSS：
div#container { display: flex;
flex-direction: row;
align-items: center;
}
结果：
这是一个演示。
示例：align-content: center在垂直 flexbox 上
CSS：
div#container { display: flex;
flex-direction: column;
align-items: center;
}
结果：
这是一个演示。
示例：在水平 flexbox 上居中的组合
div#container { display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
结果：
这是一个演示。
示例：在垂直 flexbox 上居中的组合
div#container { display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
结果：
这是一个演示。
以上是 CSS 动态垂直和水平居中（align-items、justify-content） 的全部内容， 来源链接： utcz.com/z/360493.html
