元素的水平垂直居中问题

元素的水平垂直居中问题

	<div class="outbox">
        <div class="box">

        </div>
    </div>

一、margin

    .outbox{
        width: 200px;
        height: 300px;
        border: 1px solid blueviolet;
    }
    .box {
         width: 100px;
         height: 50px;
         border:  1px solid brown;
         margin-top: 125px;
         margin-left: 50px;
         
    }

缺点：必须要知道两个盒子的宽高，然后自己算，十分麻烦。

二、定位

    .outbox{
        width: 200px;
        height: 300px;
        border: 1px solid blueviolet;
        position: relative;
    }
    .box {
         width: 100px;
         height: 50px;
         border:  1px solid brown;
         position: absolute;
         top: 125px;
         left: 50px;
         
    }

缺点：必须要知道两个盒子的宽高，然后自己算，十分麻烦。

三、定位 + 位移

	.outbox{
        width: 200px;
        height: 300px;
        border: 1px solid blueviolet;
        position: relative;
    }
    .box {
         width: 100px;
         height: 50px;
         border:  1px solid brown;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%,-50%);
     }

优点：不需要知道盒子的宽高，兼容性高。

四：display：flex

    .outbox{
        width: 200px;
        height: 300px;
        border: 1px solid blueviolet;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box {
         width: 100px;
         height: 50px;
         border:  1px solid brown;
         
    }

优点：写法简单，高效，移动端几乎不需要考虑兼容性。
缺点：在pc端可能会存在兼容性。

五、display: table-cell

    .outbox{
        width: 200px;
        height: 300px;
        border: 1px solid blueviolet;
        display: table-cell;
        vertical-align: middle;
    }
    .box {
         width: 100px;
         height: 50px;
         border:  1px solid brown;
         margin: auto;
    }

六、JS + margin

        var outbox = document.querySelector('.outbox'),
            box = document.querySelector('.box'),
            W = outbox.offsetWidth,
            H = outbox.offsetHeight,
            w = box.offsetWidth,
            h = box.offsetHeight;
        box.style.marginLeft=((W-w)/2) + 'px';
        box.style.marginTop=((H-h)/2) + 'px';