[分享]css两个div上下远点

在网页布局中，经常会遇到需要将两个div元素上下排列，并且需要相隔一定的距离，这时候我们可以使用CSS来实现，下面我们就来看一下如何实现两个div上下居中的效果。 这是第一个div元素 这是第二个di...

在网页布局中，经常会遇到需要将两个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元素在页面上下居中的效果了。