实现水平垂直居中的方法

在平时开发中，经常会遇到需要内容水平垂直居中的需求，这里记录一下常见的几种方法。

Flex

通过flex属性来设置元素的水平垂直居中是目前最常见的一种方式。Flex布局是目前非常流行的一种布局方式，关于Flex布局可以查看阮一峰大神的文档：Flex 布局教程：语法篇

这里记录一下具体实现方法：

<style>
	.mainDiv {
       	width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: red;
    }
    .centerDiv {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<div class="mainDiv">
    <div class="centerDiv"></div>
</div>

效果如下：

这里需要注意一下，当属性为flex时，是通过设置justify-content和align-items属性来实现元素内容的居中，但justify-content和align-items并不是规定水平与垂直方向上的居中，而是主轴和交叉轴方向的居中。在Flex布局中，通过flex-direction属性来规定主轴方向，默认的主轴方向是水平方向。

因此如果只要求水平或垂直居中，需要先看下该元素的主轴方向，再决定使用justify-content或align-items来实现居中。

绝对定位实现居中

绝对定位实现水平垂直居中也是比较常见的一种方式，这里可以分为两种情况：

在居中的元素高度明确时，可以通过给元素设置margin来实现居中；在高度不明确时，给元素设置margin的方式就比较麻烦了，因此可以通过transform属性来实现居中。代码如下：

<style>
		.father {
            width: 300px;
            height: 300px;
            position: relative;
            background-color: teal;
        }
        .marginDiv {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;
            background-color: tomato;
        }
        .transDiv {
            width: 50%;
            height: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: tomato;
        }
</style>

<div class="father">
    <div class="marginDiv">我有具体高度</div>
</div>
<div class="father">
    <div class="transDiv">我没有具体高度</div>
</div>

结果：

table-cell属性

通过设置table-cell属性，将其视为table表格来实现水平垂直居中,table-cell相当于表格的td，这种方式常用来实现多行文本的垂直居中，如：

<style>
	.table {
      width: 300px;
      height: 300px;
      background-color: aquamarine;
      display: table;
    }
    .cell {
      display: table-cell;
      vertical-align: middle;  // 内容垂直居中
      text-align: center;  // 内容水平居中
    }
</style>

<div class="table">
    <div class="cell">
      	aaaaaaaa</br>
      	aaaaaaaa
    </div>
</div>

结果：

table-cell相当于表格的td，而td是行内元素，没有宽高，会自动填充满父元素，因此这里要注意一下，如果对table-cell元素设置了背景色，会覆盖掉父元素table的背景色。

如果要居中的内容有宽高要求，就要在嵌套一层div，属性设为inline-block,如：

<style>
	.table {
      width: 300px;
      height: 300px;
      background-color: red;
      display: table;
    }
    .cell {
      display: table-cell;
      vertical-align: middle;  // 内容垂直居中
      text-align: center;  // 内容水平居中
      background-color: green;
    }
    .son {
      width: 100px;
      height: 100px;
      display: inline-block;
      background-color: burlywood;
    }
</style>

<div class="table">
    <div class="cell">
      	<div class="son"></div>
    </div>
</div>

结果：

从结果上看到，给table-cell设置了背景色以后，table的红色被覆盖掉了。而table-cell元素内的元素，如果不设置inline-block，会无法实现水平居中。