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;
}

方法二：子元素绝对定位，left值 top值设为50%，另外设置margin-left和margin-top值为负的元素属性width、height值的一半

.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;
}

方法三：子元素绝对定位，left值 top值设为50%，另外设置transform:translate(-50%,-50%);

.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%);
}

方法四：flex布局方法：设置容器的布局方式为display：block，同时设置子元素的margin：auto

#container{
    border: 1px solid red;
    width: 500px;
    height: 500px;
    display: flex;

}
#box{
    margin: auto;
    border: 1px solid red;
    width: 100px;
    height: 100px;

}