使用Flex布局实现盒子的水平垂直居中
在Flex布局中，要实现盒子的水平垂直居中，可以将容器的justify-content属性设置为center（水平居中）和align-items属性设置为center（垂直居中）。以下是一个简单的例子：
HTML:
<div class="flex-container">
<div class="flex-item">居中的盒子</div>
</div>CSS:
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 200px; /* 容器高度 */
border: 1px solid #000; /* 边框，为了清晰地显示布局效果 */
}
.flex-item {
width: 100px; /* 盒子宽度 */
height: 50px; /* 盒子高度 */
text-align: center; /* 文字水平居中 */
line-height: 50px; /* 行高与盒子高度相同，实现垂直居中 */
}这段代码会创建一个高度为200px的flex容器，其中包含了一个宽度为100px、高度为50px的盒子，该盒子在容器中水平和垂直居中。
评论已关闭