CSS实现水平垂直居中的常见方法

使用css实现水平垂直居中的方式有很多种，现在来说一下几种个人平时用的比较多的几种方式。 以下使用如下html代码作为示例：

<style tyle='text/css'>
	.parent {
	    width: 400px;
	    height: 400px;
	    border: 1px solid #f00;
	}
	.child {
	    width: 200px;
	    height: 200px;
	    border: 1px solid #00f;
	}
</style>
<div class='parent'>
    <div class='child'>
    </div>
</div>

1.使用Flex：

.parent {
    display: flex;
    justify-content: center; // 主轴上的对齐方式
    align-items: center;	 // 交叉轴上的对齐方式
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2.使用position：

.parent {
    position：relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 水平向左平移自身的50%，垂直向上平移自身的50%
}

说明：使用top: 50%;left: 50% 是以左上角为原点，所以child不会处于parent中心的位置translate(-50%,-50%) 的作用是相对于child自身往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

3.使用Grid布局：

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

.parent {
    display: grid;
}
.child {
    justify-self: center;
    align-self: center;
}

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

4.使用CSS伪类：

.parent {  
    text-align: center;  
}  
.parent:after {    
    content: ''; 
    height: 100%;  
}  
.parent:after,.child {    
    display: inline-block;   
    vertical-align: middle;  
}

5.使用display: flex 配合 margin：

.parent {
    display: flex;
  }  
.child {
    margin: auto; // 水平居中  
}

6.使用position 配合 margin：

.parent {
    position: relative;
 }  
.child {
    margin: auto; // ＊重要＊    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

7.使用display:table：

<style type='text/css'>
.parent {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.cell {
    width: 200px;
    height: 200px;
    border: 1px solid #00f;
    display: inline-block;
}
</style>
<div class="parent">
    <div class="child">
        <div class="cell"></div>
    </div>
</div>	

说明：child里面还要包裹一个行内元素才使得child具有宽、高属性，child设置为display:table-cell时设置自身的宽高会失效。

8.使用display:table-cell：

.parent {
    display: table-cell;  /*子元素成为表格单元格（类似 <td> 和 <th>）*/
    vertical-align: middle;
    text-align: center;	
}
.child {
    display: inline-block;
}

说明：设置了display：table-cell的元素

• 对宽度高度敏感
• 对margin值无反应
• 响应padding属性
• 内容溢出时会自动撑开父元素