如何将div上下居中，左右居中有五种（width height定，width height不定尺寸不固定）

more名奇妙

已于 2022-09-20 11:14:23 修改

阅读量5.7k

点赞数 1

文章标签：前端 html javascript

于 2022-09-06 15:21:13 首次发布

本文链接：https://blog.csdn.net/m0_67948827/article/details/126724690

版权

width height定

1.绝对定位 top50% left50% margin-top 负值定为自身高一半 margin-left负值定为自身宽一半

2.定位拉伸定位父relative子absolute top0 left0 right0 bottom0 margin auto

      .box {
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            position: relative;
        }

        .pinx_box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

width height不定尺寸不固定

1.兼容性很好只有ie老版本不兼容因为display:inline-block没有

水平居中 text-align: center;

垂直居中利用伪元素

.box::after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}

 <style>
          .box {
            width: 300px;
            height: 300px;
            text-align: center;
            background-color: aquamarine;
        }

        .pinx_box {
            width: 100px;
            height: 80px;
            background-color: pink;
            display: inline-block;
            vertical-align: middle;
        }

        .box::after {
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    </style>

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

2. 弹性很好兼容性不好

父容器包裹起来给父容器设置