在网页布局中,经常会遇到需要将两个div元素上下排列,并且需要相隔一定的距离,这时候我们可以使用CSS来实现,下面我们就来看一下如何实现两个div上下居中的效果。 <div class=
在网页布局中,经常会遇到需要将两个div元素上下排列,并且需要相隔一定的距离,这时候我们可以使用CSS来实现,下面我们就来看一下如何实现两个div上下居中的效果。
<div class="box1">这是第一个div元素</div> <div class="box2">这是第二个div元素</div>
首先我们需要设置两个div元素的样式,在CSS中设置margin属性可以使元素上下偏移一定距离,如下所示:
.box1{ width: 100px; height: 100px; background-color: #f00; margin-bottom: 20px; /* 下边距为20px */ } .box2{ width: 100px; height: 100px; background-color: #0f0; }
这样我们就可以实现两个div元素的上下居中效果,如果我们希望两个div元素相对页面上下居中,可以使用Flex布局,如下所示:
<div class="container"> <div class="box1">这是第一个div元素</div> <div class="box2">这是第二个div元素</div> </div> <br> .container{ display: flex; flex-direction: column; justify-content: center; /* 垂直对齐方式为居中 */ align-items: center; /* 水平对齐方式为居中 */ height: 100vh; /* 设置高度为视窗高度 */ } .box1{ width: 100px; height: 100px; background-color: #f00; } .box2{ width: 100px; height: 100px; background-color: #0f0; }
这样就可以实现两个div元素在页面上下居中的效果了。
粉丝
0
关注
0
收藏
0