CSS实现水平垂直居中

水平垂直居中

居中元素定宽高：

1. absolute + margin auto

代码实现：

<div class="outer">
  <div class="inner size"></div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
}
.size{
  width: 100px;
  height: 100px;
  background: pink;
}
.inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

优点：兼容性好，可读性强
缺点：需要知道子元素宽高

2. absolute + 负margin

代码实现：

<div class="outer">
  <div class="inner size"></div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
}
.size{
  width: 100px;
  height: 100px;
  background: pink;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

优点：兼容性好,可读性强
缺点：需要知道子元素宽高

3. absolute + calc

代码实现：

<div class="outer">
  <div class="inner size"></div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
}
.size{
  width: 100px;
  height: 100px;
  background: pink;
}
.inner {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

优点：可读性强
缺点：

• 兼容性依赖calc的兼容性，只支持IE9以上；
• 需要知道子元素高度

居中元素不定宽高：

1. absolute + transform

代码实现：

<div class="outer">
  <div class="inner">inner</div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: pink;
}

优点：可读性强；实现简单，易于理解；子元素不需要定宽高
缺点：兼容性依赖transform的兼容性，只支持IE9以上；

2. table

代码实现：

<table>
	<tbody>
		<tr>
			<td class="outer">
				<div class="inner">inner</div>
			</td>
		</tr>
	</tbody>
</table>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
  text-align: center;
}
.inner {
  display: inline-block;
  background: pink;
}

优点：子元素不需要定宽高，兼容性好
缺点：不属于table的正常用法，冗余代码比较多；

3. css-table

代码实现：

<div class="outer css-table">
	<div class="inner">inner</div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
}
.css-table {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.inner {
  display: inline-block;
  background: pink;
}

优点：子元素不需要定宽高，兼容性好,和上面table原理一样
缺点：

4. line-height

代码实现：

<div class="outer">
  <div class="inner">inner</div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
  
  line-height: 300px;
  text-align: center;
}
.inner {
  background: pink;
  
  display: inline-block;
  line-height: initial;
}

优点：子元素不需要定宽高，兼容性好
缺点：子元素内需要纠正line-height和text-align

5. flex

代码实现：

<div class="outer">
  <div class="inner">inner</div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.inner {
  background: pink;
}

优点：子元素不需要定宽高，可读性强
缺点：兼容性依赖flex

6. grid

代码实现：

<div class="outer">
  <div class="inner">inner</div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
  
  display: grid;
  
}
.inner {
  background: pink;

  justify-self: center;
  align-self: center;
}

优点：子元素不需要定宽高，可读性强
缺点：兼容性依赖grid，相比来说grid兼容性不如flex

7. writing-mode

emmm这是我第一次看到这个属性

writing-mode 属性定义了文本在水平或垂直方向上如何排布。
语法格式如下：
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr：垂直方向内内容从上到下，水平方向从左到右
sideways-rl：内容垂直方向从上到下排列
sideways-lr：内容垂直方向从下到上排列

代码实现：

<div class="outer">
  <div class="vt">
    <div class="inner">inner</div>
  </div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #999;
  
  writing-mode: vertical-lr;
  text-align: center;
    
}
.vt{
  writing-mode: horizontal-tb;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.inner {
  background: pink;
  margin: auto;
  display: inline-block;
}

这种方式理解起来比较复杂，代码也有点复杂。

参考文章：
CSS实现水平垂直居中的1010种方式
原文网址：http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/
原文作者：@颜海镜，他的博客 http://yanhaijing.com