CSS布局之水平垂直居中

水平垂直居中的布局在编程中经常遇到，在此总结一下水平垂直居中的方法。

方法一

主要利用left、right、top、buttom都设为0 margin为auto方法

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

.container{
    border:1px solid black;
    width:300px;
    height:300px;
    position:relative;
}
.box{
    border:1px solid red;
    width:50px;
    height:50px;
    position:absolute;
    left:0;
    right: 0;
    top:0;
    bottom:0;
    margin:auto;
}

方法二：

.container{
    border:1px solid black;
    width:300px;
    height:300px;
    position:relative;
}
.box{
    border:1px solid red;
    width:50px;
    height:50px;
    position:absolute;
    left:50%;
    top: 50%;
    margin-left:-25px;
    margin-top:-25px;
}

方法三：

.container{
    border:1px solid black;
    width:300px;
    height:300px;
    position:relative;
}
.box{
    border:1px solid red;
    width:50px;
    height:50px;
    position:absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
}