实现元素水平垂直居中的几种方式及各自优点和缺点

实现一个盒子在父盒子中水平垂直居中的几种“姿势”：

• 定位三种
• display:flex
• display:table-cell
• javaScript动态取值

 HTML部分

<div class="container" id="container">
      <div class="box" id="box">盒子内容</div>
</div>

基础样式

.container{
    position: relative;
    height: 500px;
    box-sizing: border-box;
    border: 1px solid #999;
}
.box{
    box-sizing: border-box;
    background-color: pink;
    width: 200px;
    height: 100px;
}

初始化效果

 

 

 

第一种 绝对定位+margin负值

        /* 缺陷：需要知道盒子的宽高 */
        .box{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -50px;
        }       

 

第二种 绝对定位+margin:auto

        /* 优点：不需要盒子的确切宽高 */
        /* 缺陷：盒子一定要有宽高，缺一不可，缺少一个都达不到效果 */
        .box{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

 

第三种 绝对定位 + translate() 

        /* 优点：不需要盒子的确切宽高，也不要求盒子一定要有宽高 */
        /* 缺陷：兼容性要求 */
        .box{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

 

第四种 父盒子flex

        /* 优点：不需要盒子的确切宽高，也不要求盒子一定要有宽高 */
        /* 缺陷：兼容性要求 */
        .container{
            display: flex;
            justify-content: center;
            align-items: center;
        }

 

第五种 父盒子table-cell + 行内块盒子

        /* 优点：不需要盒子的确切宽高，也不要求盒子一定要有宽高 */
        /* 缺陷：父盒子要有确切的宽高，不能是百分比；子盒子需要额外添加行内属性 */
        .container{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 600px; 
        }
        .box{
            display: inline-block;
        }

第六种 js动态设置 id可以直接获取页面相同的dom元素

    <script>
        let pW = container.clientWidth,
            pH = container.clientHeight,
            boxW = box.offsetWidth,
            boxH = box.offsetHeight;

        box.style.position = 'absolute';
        box.style.left = (pW - boxW)/2 + 'px'
        box.style.top = (pH - boxH)/2 + 'px'
    </script>