元素居中（水平+垂直）总结

如果对css样式的作用机制有疑惑，建议阅读张鑫旭著《CSS世界》

一、内联元素

1、水平居中

在父元素设置text-align：center属性即可。
这个属性写作text-align，不仅可以作用在文本上，也可以作用在图片和inline元素等上。
代码：

效果：

2、垂直居中

坊间传闻：要将单行文本居中，需要同时设置line-height与height两个属性，并且使其相等。
这样确实可以使单行文本居中，但是这种描述并不准确。
—— 详解见张鑫旭著《CSS世界》，5.2.2 为什么line-height可以让内联元素“垂直居中”

代码：

代码详解：
a、.test需要设置为inline-block，以在test前产生”幽灵空白节点“
b、.father设置line-height，作用在幽灵空白节点上，撑起父元素的高度
c、.test设置line-height：20px；覆盖继承自父元素的line-height属性
d、.test设置vertical-align：middle；使.test文本框与幽灵空白节点的中线对齐

幽灵空白节点：内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点一样”。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实存在，表现如同文本节点一样，因此，称之为“幽灵空白节点”。
注意：每个内联元素之前都有一个“幽灵空白节点”
详解见张鑫旭著《CSS世界》3.4.3，幽灵空白节点

效果：

二、块级元素

1、水平居中

设置margin:0 auto;
代码：

效果：

三、垂直居中+水平居中

第三部分内容中，垂直居中与水平居中实现原理并无差别

3.1、元素本身设置了高度/宽度

作用对象是那些可以设置宽高的元素，所以内联元素不能使用这种方法居中
代码：

代码详解：
a、.father设置position：relative；作为.son元素的定位锚
b、.son 设置position:absolute; top:50%；
相对.father这个锚位置偏移。生效后，.son上边距.father上边50%的.father高度

c、.son设置margin-top：-50px；.son向上偏移自身高度一半的距离

效果：

3.2、不限制元素宽高

3.2.1：position + transform

同样是使用绝对定位来实现第一步偏移，只是第二步偏移的方式有所改变，由margin 改为 CSS中的translate（）
代码：

效果：

3.2.2：使用flexbox布局

待居中元素的父元素设置display：flex；自身设置样式margin：auto
代码：

效果：

3.2.3：table-cell

适用于不定宽高，不定元素个数的对齐
代码：

效果：

3.2.4：position+T/R/B/L = 0 + margin:auto

代码：

效果：