水平居中：
1. 行内元素的水平居中：在父元素中设置`text-align: center;`,只对内联元素或行内块元素有效，需要放置于父元素中。
2. 块级元素的水平居中：使用`margin: 0 auto;`,只对块级元素有效。`auto`指的是自适应宽度，实质上是均分了元素左右的剩余空间，使元素居中。`auto`只有在块级元素设置了宽度`width`才有效(块级元素不设宽度默认就占整行了，所以是废话)。需要注意的是，`auto`无法实现块级元素的垂直居中，原因与CSS默认的高度计算规则有关。但`margin:auto`可以实现绝对定位元素的水平垂直居中。
垂直居中：
1. 行内元素的垂直居中：在父元素中设置`line-height: 父元素的高度；`,只对内联元素或行内块元素有效，需要知道父元素的高度，需要放置于父元素中。适用于垂直方向上只有一个需要居中的元素的情况。
2. 垂直对齐inline元素：`vertical-align: middle;`,只对内联元素或行内块元素有效。主要用在文本和与文本相邻元素的垂直方向上的对齐问题(主要是对齐的作用，而不是居中的作用),例如将一个icon与文字对齐。使用`vertical-align`需要了解文字的baseline和line-box等知识。
水平垂直居中：
1. 浮动元素：使用`position: relative;`,具体方法与绝对定位的第1个和第2个方法类似，只不过把`absolute`改为`relative`,并根据原float的方向稍作修改即可。相对定位`relative`可以和`float`叠加，在`float`后的位置上再相对定位。缺点就是`float`元素居中后仍会占据原来的位置。第二种方式中，如果设定了浮动元素的高度，将会影响`transform`的具体值。
2. 绝对定位元素：使用50%推进法则，设置`position: absolute; left: 50%; top: 50%; margin-left: -该元素自身宽度的一半px; margin-top: -该元素自身高度的一半px;`,只对绝对定位的元素有效，需要知道绝对定位元素的宽高。兼容性很好，是一种主流用法。第一种方法的改进版，使用`transform`代替`margin`,设置`position: absolute; transform: translate(-50%, -50%);`。
以下是重构后的代码，并保持了段落结构：
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /*水平垂直居中*/
不需要知道绝对定位元素的宽高。(如果设置了高度，则有可能影响到transform的具体值)
兼容性一般，IE10+以及其他现代浏览器支持
使用margin:auto;
position: absolute;
left: 0;
right: 0; /*水平居中*/
top: 0;
bottom: 0; /*垂直居中*/
margin: auto;
只对绝对定位的元素有效
不必知道宽高，但需要是图片这种自身包含尺寸的元素
left与right必须配对出现，top与bottom必须配对出现
目前支持IE9+,及其他浏览器。
flex居中方式
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
块级元素设置display: flex;,内联元素设置display: inline-flex;。
需要注意的几个问题
1. 元素浮动后仍可以设置margin属性，但auto不会起作用。
2. 图片居中的问题
注意：如果图片的宽度大于父元素的宽度， 不能使用margin: 0 auto;或者text-align: center;让图片居中。如果图片的宽度大于父元素的宽度， 可以绝对定位中的居中方式让图片居中。但是定位流的弊端也比较明显。它必须知道图片宽度。如果图片的宽度大于父元素的宽度， 也可以使用margin: 0 -100%;注意： 父元素必须设置text-align: center;
