1. 水平居中
1.1 行内或者具有行内元素性质的元素（比如文字或者链接）
使其父元素为块级元素的行内元素水平居中。
/* css */.center-children { text-align: center;}复制代码 1.2 单个块级元素(定宽)
设置块级元素的 margin-left 和 margin-right 为 auto ，来使其水平居中。
注意：这个块级元素要有 width 属性，否则会占满宽度，这时候已经不需要居中了。/* css */.center-me { margin: 0 auto;}复制代码 1.3 多个块级元素（聚成一行居中）
方案一：利用display:inline-block; 块级元素inline-block,父元素text-align:center。
/* css */.inline-block-center { text-align: center;}.inline-block-center div { display: inline-block; text-align: left;}复制代码 方案二：flex布局
/* css */.flex-center { display: flex; justify-content: center;}复制代码 1.4 多个块级元素（在各自行居中）
利用 margin: xxxpx auto;
/* css */main div { margin: 0 auto;}复制代码 2. 垂直居中
2.1 行内或者具有行内元素性质的元素（比如文字或者链接）
2.1.1 单行
方案一：padding-top === padding-bottom
/* css */.link { padding-top: 30px; padding-bottom: 30px;}复制代码 方案二：line-height === height
若 padding 无效，要使不换行的文字居中有一个技巧，设置文字的 line-height 和 height 的值相等。/* css */.center-text-trick { height: 100px; line-height: 100px; white-space: nowrap;}复制代码 2.1.2 多行
方案一：padding-top === padding-bottom
方案二：table化 结合 verticl-align 如果这种方法不奏效的话，可以设置文字所在的元素为一个 table cell（无论它直接是 table 还是用CSS使这个元素表现的像一个 table cell），结合 vertical-align 属性处理这种情况，它与我们通常所做的在行上处理元素对齐的方式不同：/* css *//* table 的情况 */table { background: white; width: 240px; border-collapse: separate; margin: 20px; height: 250px;}table td { background: black; color: white; padding: 20px; border: 10px solid white; /* default is vertical-align: middle; */}/* display:table 的情况 */.center-table { display: table; height: 250px; background: white; width: 240px; margin: 20px;}.center-table p { display: table-cell; margin: 0; background: black; color: white; padding: 20px; border: 10px solid white; vertical-align: middle;}复制代码 方案三：flex布局
注意：父元素height值(px %)固定/* css */.flex-center-vertically { display: flex; justify-content: center; /* 排列方向变了，所以变成了垂直方向上的水平居中 */ flex-direction: column; /* 垂直排列 */ height: 400px;}复制代码 方案四：伪元素
原理：让一个完整高度的伪元素放置在容器内，并与文本垂直对齐。/* css */.ghost-center { position: relative;}.ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle;}.ghost-center p { display: inline-block; vertical-align: middle;}复制代码 2.2 块级元素
2.2.1 元素高度确定
绝顶定位+百分比+负margin
/* css */.parent { position: relative;}.child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* 考虑padding 和 border 如果不使用box-sizing: border-box; */}复制代码 2.2.2 元素高度不确定
不知道元素的高度是比较常见的，有很多原因：如果宽度改变，文本回流会改变高度；文字样式改变会改变高度；文字数量改变会改变高度；一个固定比例的元素，比如图片，当重置尺寸的时候也会改变高度，等等。
方案一：绝对定位+百分比+transform/* css */.parent { position: relative;}.child { position: absolute; top: 50%; transform: translateY(-50%);}复制代码 2.2.3 flex布局（通用）
/* css */.parent { display: flex; flex-direction: column; justify-content: center;}复制代码 3. 垂直水平居中
3.1 元素有固定的宽和高
绝对定位+百分比+负margin组合
/* css */.parent { position: relative;}.child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; /* 感觉好傻，直接用下面的百分比方法也可以 */}复制代码 3.2 元素的宽和高未知
方案一：绝对定位+百分比+transform组合
/* css */.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}复制代码 3.3 flex布局（通用）
/* css */.parent { display: flex; justify-content: center; align-items: center;}复制代码 3.4 grid布局（通用）
/* css */body, html { height: 100%; display: grid;}span { /* thing to center */ margin: auto;}复制代码 4. 参考链接
- https://css-tricks.com/centering-css-complete-guide/
- https://juejin.im/entry/583b954b61ff4b006b55b43d
- http://www.cnblogs.com/chaixiaozhi/p/8490725.html