[分享]css两个div居中对齐

CSS是网页开发中不可少的一部分，它可以实现网页的美化和排版。本文将详细介绍如何使用CSS实现两个div元素的居中对齐。首先，在HTML中需要创建两个div元素，并设置它们的属性和样式： 这是第一个...

CSS是网页开发中不可少的一部分，它可以实现网页的美化和排版。本文将详细介绍如何使用CSS实现两个div元素的居中对齐。

首先，在HTML中需要创建两个div元素，并设置它们的属性和样式：

 <div class="box">
        <p>这是第一个div</p>
    </div>
    <div class="box">
        <p>这是第二个div</p>
    </div> .box {
        width: 200px;
        height: 100px;
        background-color: #ccc;
        margin: 0 auto;
    }

在上面的代码中，我们设置了两个div元素的class为box，并为它们设置了相同的宽度和高度。另外，我们通过设置margin为0 auto来使两个div元素水平居中对齐。

接下来，我们将在CSS中使用Flexbox来实现两个div元素的垂直居中对齐：

 .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .box {
        width: 200px;
        height: 100px;
        background-color: #ccc;
    }

在上面的代码中，我们首先创建了一个父容器，将其display设置为flex，并设置justify-content和align-items属性为center，这样就能使两个div元素同时水平垂直居中对齐。

最后，在HTML中添加一个父容器，并为其设置class为container即可实现两个div元素的居中对齐：

 <div class="container">
        <div class="box">
            <p>这是第一个div</p>
        </div>
        <div class="box">
            <p>这是第二个div</p>
        </div>
    </div> 

如此简单，便能够实现两个div元素的居中对齐，使网页看起来更加美观和整洁。