在CSS中,垂直居中一直是一个常见难点。但是,使用flex布局可以轻松实现垂直居中并且可读性很强且易于维护。下面我们来看一下如何使用flex布局垂直居中两个div。 <div class
在CSS中,垂直居中一直是一个常见难点。但是,使用flex布局可以轻松实现垂直居中并且可读性很强且易于维护。下面我们来看一下如何使用flex布局垂直居中两个div。
<div class="container">
<div class="box1">
<p>Box 1</p>
</div>
<div class="box2">
<p>Box 2</p>
</div>
</div>
这是一个包含两个div的容器。现在,我们将使用CSS属性来使它们垂直居中。
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box1, .box2 {
width: 200px;
height: 200px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.box1 {
margin-right: 50px;
}
在这个示例中,我们首先将容器设置为flex,并使用align-items和justify-content属性将内容垂直和水平居中。这使得容器中的所有内容都垂直居中了。接下来,我们将两个div分别设置为flex,并使用align-items和justify-content属性将它们垂直和水平居中;同时,还添加了一个较大的间距,使它们相互分隔。
现在,大功告成!运行代码并让您的盒子垂直居中!
总之,使用flex布局可以轻松实现CSS两个div垂直居中。这是一个强大的功能,可大大提高页面布局的可读性,简化代码并减少复杂性。
粉丝
0
关注
0
收藏
0