[分享]css中div水平垂直居中

在网页开发中，经常会遇到需要将一个div居中的情况。而这个div又需要水平和垂直都居中。这时我们可以使用CSS来实现这个功能。首先我们需要有一个需要居中的div，我们可以给它一个指定的宽度和高度，方便...

在网页开发中，经常会遇到需要将一个div居中的情况。而这个div又需要水平和垂直都居中。这时我们可以使用CSS来实现这个功能。

首先我们需要有一个需要居中的div，我们可以给它一个指定的宽度和高度，方便我们进行布局：

 <div class="box">
        <p>Hello World</p>
    </div>

    .box {
        width: 200px;
        height: 200px;
        background: pink;
    } 

接下来我们可以使用flexbox实现居中。flexbox是一种强大的CSS布局方式，它可以轻松地实现水平和垂直居中。我们需要将父级元素的display设置为flex，并使用align-items和justify-content来实现垂直和水平居中：

 .parent {
        display: flex;
        justify-content: center;
        align-items: center;
    } 

还可以使用CSS的transform属性来实现居中，我们可以将定位属性设置为absolute，同时使用transform属性在父级元素中进行平移：

 .parent {
        position: relative;
    }

    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    } 

以上就是CSS中实现div水平垂直居中的方法。这样，我们可以轻松地实现一个美观的页面布局。