CSS实现水平垂直居中

1 水平居中

​ 首先讨论一下如何将一个元素进行水平居中。给定以下HTML代码。

<div class='box'>
    水平居中
</div>

​ 通过css实现div的水平居中。

.box{
    width:300px;
    height: 300px;
    margin: 0 auto;
}

​ 首选设置box的宽度和高度，然后设置box外边距margin就可以实现水平居中。实现的原理很简单，利用了盒模型来解决这个问题。

​ box的盒模型水平布局由以下7个属性相加组成。

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

​ 假设浏览器的宽度是1080px，那么box的父元素的宽度也是1080px，box想在父元素容器里面实现水平居中，通过设置margin的左右边距就可以实现。但浏览器的宽度不是固定的，要想动态实现水平居中，那么就不能固定设置margin的值。

​ 通过margin:0 auto就可以自动设置左右边距，其代表的意思是，上下外边距为0，左右外边距自动，auto就会自动折半给box设置外边距。

2 水平垂直居中

2.1 方法一

<div class='box'>
    
</div>

/* 设置top,bottom,left,right都为0，margin为auto */
.box{
    width:200px;
    height:200px;
    background-color:#bra;
    
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

2.2 方法二

<div class='box'>
    
</div>

/* 设置margin向负方向移动，移动的距离是box宽高的一半 */
.box{
    width:200px;
    height:200px;
    background-color:#bra;
    
    position:absolute;
    left:'50%',
    right:'50%',
    margin: -100px -100px;
    
}

2.3 方法三

<div class='box'>
    
</div>

/* 通过translate来平移实现，相比于上面哪种方法，可以实现自适应 */
.box{
    width:200px;
    height:200px;
    background-color:#bra;
    
    position:absolute;
    left:'50%';
    right:'50%';
    transform:translate('50%','50%')
}

2.4 方法四

<div class='box'>
    <div class='box1'>
        
    </div>
</div>

/* flex布局法，设置水平和垂直居中 */
.box{
    dispaly:flex;
    align-items:center;
    justify-content:center;
    height:1000px;
}

.box1{
    width:100px;
    height:100px;
    background-color:pink;
}

​ 通过flex布局实现水平垂直居中要注意一个问题，前面几个例子都是一个div元素，而掌柜例子有两个div元素，使用需要将外面的div设置一个高度，这样垂直布局居中才会生效，否则就外面div的高度就是子div的高度，看不出来水平垂直居中的效果。