js-div-flex布局-弹性布局-元素居中-盒子水平垂直居中
以下是一个使用CSS Flexbox布局让div元素在页面中水平垂直居中的示例代码:
HTML:
<div class="flex-container">
<div class="centered-div">
居中的内容
</div>
</div>
CSS:
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使容器的高度为视口高度 */
}
.centered-div {
/* 为div定义样式,如宽度、高度、边框等 */
}
这段代码会创建一个全屏的flex容器,并且让其中的div元素在水平和垂直方向上居中。
评论已关闭