关于css设置元素垂直水平居中的问题_外层200px内层100px margin:50px;为啥不能水平垂直居中-CSDN博客

本文链接：https://blog.csdn.net/m0_56232239/article/details/121901056

第一种: 利用定位属性实现,但需要知道元素的宽高

<div class="box"></div>

<style>
    .box{
        weight:200px;
        height:400px;
        <!--给元素添加定位属性-->
        position:absolute;
        <!--设置元素的定位位置,距离上,做都为50%-->
        left:50%;
        top:50%;
        <!--设置元素的左外边距,上外边距为宽高的负1/2-->
        margin-left:-100px;
        margin-top:-200px;
        <!--或者简写-->
        margin: -200px 0 0 -100px; //四个值分别对应,上,右,下,左
    }
    *优点:兼容性好; 缺点:必须知道元素的宽高;
</style>

第二种: 利用定位属性实现,不用知道元素的宽高

<div class="box"></div>

<style>
    .box{
        weight:200px;
        height:400px;
        <!--把元素变成定位元素-->
        position:absolute;
        <!--设置元素的定位位置,距离上,做都为50%-->
        left:50%;
        top:50%;
        <!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->
        transform:translate(-50%,-50%)
    }
    *这是css3里的样式;优点:不需要知道元素的宽高;缺点:兼容性不好，只支持IE9+的浏览器
</style>

第三种:利用定位属性的四个值结合margin实现

<div class="box"></div>

<style>
    .box{
        weight:200px;
        height:400px;
        <!--把元素变成定位元素-->
        position:absolute;
        <!--设置元素的定位位置,距离上,做都为50%-->
        left:0;
        top:0;
        right:0;
        bottom:0
        <!--设置元素的margin样式值为 auto-->
        margin:auto;
    }
    *兼容性较好，缺点:不支持IE7以下的浏览器
</style>

以上三种是使用定位属性实现的垂直水平居中,下面是弹性布局中实现的元素垂直水平居中的方法

display:flex实现垂直水平居中

<!DOCTYPE html>
<html>
    <heade>
        <style>
            .box{
                display:flex; //将外层div设置为弹性容器
                height:200px;
                width:400px;
                justify-content:center; //水平方向居中
                align-items:center; // 垂直方向居中
            }
            .item{
                width:50px;
                height:40px;
            }
        </style>
    </heade>
    <body>
        <div class="box">
            <div class="item1></div>
            <div class="item2></div>
            <div class="item3></div>
            <div class="item4></div>
            <div class="item5></div>
        </div>
    </body>
</html>