CSS中实现水平/垂直居中

在CSS中实现水平居中相对简单，但是却没有一个明确的属性表示这是实现垂直居中的，这就导致垂直居中的实现相对初学者来说难上许多。但是在实际的开发中垂直居中的需求常常出现，例如一行中有左右两部分，左边是图片，右边是文字，这时需要左右两部分按照垂直居中对齐（新闻列表的样式）等等。

---

注：

<style>
html,
body{height: 100%;
}.wap{height: 100%;
}
</style>

以上代码只是为了让wap可以占据整平的高度，让居中效果看的更加清晰，对于居中的实现并没有关系。

为什么wap占据整屏幕需要html,body{ height: 100%} 然后在设置.wap{height: 100%}呢？而宽度要占据整屏幕.wap{ width: 100% }，如果是block元素不设置也可以占满。

因为height和width的百分比值计算方式不一样，如果父元素的height: auto子元素的height百分比值是不起作用的，但是相反，width的百分比值在width: auto的父元素下却可以正确计算。
而添加的元素都是在html和body的子元素，但是默认html和body的height是auto，并没有明确设置高度，那么子元素设置高度值为百分比自然是不起作用了。

---

水平居中对齐

方法一：使用 margin: 0 auto

该方法水平居中一个宽度固定的元素，使用了margin: 0 auto; 的方法，该方法并不能居中一个宽度没有明确设置的元素（依靠自身子元素撑起宽度），方法如下：

<style>.inner{width: 100px; height: 20px;background: #ccc;margin: 0 auto;}
</style>
<div class="wap"><p class="inner"></p>
</div>

方法二：使用绝对定位加上margin-left负值

同样适用于宽度固定的元素，如果宽度不固定就不能得知margin-left的值究竟是多少，也就无法居中。方法如下

<style>.wap2{position: relative;height: 20px;}.inner2{position: absolute;left: 50%;margin-left: -50px;  /* 注意这里，整个元素的左边界在父元素的50%处，然后向左缩进自身的一半，这样自身的中心就在父元素的50%处了。 */width: 100px; height: 20px;background: #ccc;}
</style>
<div class="wap2"></div>

方法三：绝对定位

一样只是适用于宽度固定的元素，如果被居中元素没有明确设置宽度，那么该元素就会占满position: relative; 的父元素（占满也可以说是居中了），注意margin: auto; 没有该属性即使宽度固定也不会成功居中。

<style>.wap3{position: relative;background: #333;
}.inner3{position: absolute;left: 0;right: 0;width: 20px;margin: auto;/* 以上为重要代码，要加上margin: auto; 这个不可或缺 */   height: 20px;background: #ccc;
}</style>
<div class="wap3"><div class="inner3"></div>
</div>

方法四：居中行内元素

该方法不仅仅适用于宽度固定的元素，也可以用作自身宽度不固定的元素，其实就是水平居中了一个行内元素，像居中文本一样，所以即使宽度不固定也没关系。

<style>
.wap3{text-align: center;
}.inner3{display: inline-block; /*如果html元素是block，因为text-align只能作用域行内/行内块元素*/height: 30px;background: #ccc;
}
<style>
<div class="wap3"><div class="inner3">我是水平居中的</div>
</div>

垂直居中对齐

方法一：使用绝对定位加上负的margin值

原理同水平居中的方法二，让自身定位到高度的一半处，然后再像反方向移动自身高度的一半，所以需要居中的元素的高度要是已知的。
注：父元素高度可以未知，top 的百分比值可以计算出来自己的位置和子元素宽度百分比值一样。

<style>
html,
body{height: 100%;
}
.wap{position: relative;height: 100%;background: #333;}
.inner{position: absolute;top: 50%;margin-top: -10px;width: 20px;height: 20px;background: #ccc;
}
</style><div class="wap"><div inner></div>
</div>

方法二：使用单元格垂直居中内容的特性

让元素模拟表格的单元格行为，单元格会自动垂直居中子元素无论子元素的display属性值是什么。
注: display: table-cell; 需要和 vertical-align: middle; 同用

<style>
html,
body{height: 100%;
}.wap3{display: table-cell;vertical-align: middle;/*以上两句是关键*/width: 100px;height: 100%;background: #333;
}.inner3{background: #ccc;
}</style>
<div class="wap3"><div class="inner3">我是垂直居中的</div>
</div>

方法三：使用绝对定位四个方位值为0，加上margin: auto 就会居中的特性

同水平居中的方法三

<style>
html,
body{height: 100%;
}.wap3{height: 100%;background: #333;
}.inner3{position: absloute;top: 0;bottom: 0;margin: auto;width: 20px;height: 20px;background: #ccc;
}
</style><div class="wap3"><div class="inner3">我是垂直居中的</div></div>

方法四：基于行内元素的对齐方式

该方法较为复杂，但是灵活度却是最好，该方法对于wap和inner的高度没有要求。

该方法用到的机制简单来说就是行内元素的对齐，正常情况下行内元素是按照基线对齐的，而vertical-align改变了行内元素的对齐方式为中线对齐，但是中线在正常情况下并不是元素的中心，虽然差别很小，所以使用了 font-size: 0;。
wap的行内子元素并且设置vertical-align: middel;都要和::after伪元素居中对齐。同时该伪元素的高度又和wap的高度相同，那么改为元素高度的中心就是wap高度的中心，和伪元素居中对齐就在wap的中心了。
原理较为复杂详见张鑫旭老师的博文。

<style>
html,
body{height: 100%;
}
.wap3{font-size: 0;background: #ccc;height: 100%;
}
.wap3::after{content: "";height: 100%;font-size: 0;vertical-align: middle;display: inline-block;
}
.inner3{font-size: 12px;display: inline-block;vertical-align: middle;
}
</style>
<div class="wap3"><div class="inner3">我要垂直居中</div>
</div>

方法五：使用flex布局

使用flex布局，这种方式实现起来比较简单。想要深入学习flex布局转阮一峰老师这篇博文

<style>
html,
body{height: 100%;
}.wap4{display: flex;align-items: center;height: 100%;}.inner4{}
</style>
<div class="wap4"><div class="inner4">我是垂直居中的</div>
</div>