可以使用 flex 布局实现上下居中。具体代码如下:
HTML:
<div class="container">
<div class="box">
<!-- 文字、图片等内容 -->
</div>
</div>
CSS:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 确保容器高度占满整个视窗 */
}
.box {
/* 设置一些样式,例如宽度、背景色,需要居中的内容放在这里 */
}
通过上述代码,父元素 .container
使用 display: flex
属性将其子元素水平居中对齐,使用 align-items: center
将子元素垂直居中对齐。而子元素 .box
则需要设置一些样式,并将需要居中的内容放在其中。这样就可以实现上下居中了。