使用 CSS 实现居中效果困难吗？显然不是。实际上有许多方法可以实现居中效果，但在具体情况中，我们往往无法判断哪种方法最合适。
所以让我们来创建一个层次结构的方法集，帮助你解决选择困难症~
水平居中
行内或类行内元素（比如文本和链接）
在块级父容器中让行内元素居中，只需使用text-align: center;：
这种方法可以让inline/inline-block/inline-table/inline/flex等类型的元素实现居中。
块级元素
让块级元素居中的方法就是设置margin-left和margin-right为auto（前提是已经为元素设置了适当的width宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）。常见用法如下所示：
.center-me{margin:0auto;}
无论父级容器和块级元素的宽度如何变化，都不会影响块级元素的居中效果。
请注意，float属性是不能实现元素居中的。如果你想知道使用float实现居中的非常规方案，可以参考这篇文章。
有关于水平居中更多实现方法，可以参阅早期整理的一篇博客《六种实现元素水平居中》
多个块级元素
如果要让多个块级元素在同一水平线上居中，那么可以修改它们的display值。这里有两个示例，其中一个使用了inline-block的显示方式，另一个使用了flexbox的显示方式：
如果你想让多个垂直堆栈的块元素，那么仍然可以通过设置margin-left和margin-right为auto来实现：
垂直居中
使用 CSS 实现垂直居中需要一些技巧。
行内或类行内元素（比如文本和链接）
单行
对于单行行内或者文本元素，只需为它们添加等值的padding-top和padding-bottom就可以实现垂直居中：
.link{padding-top:30px;padding-bottom:30px;}
如果因为某些原因我们不能使用padding属性来实现垂直居中，而且已知文本不会换行，那么就可以让line-height和center相等，从而实现垂直居中：
.center-text-trick{height:100px;line-height:100px;white-space:nowrap;}
多行
对于多行文本，同样可以使用等值padding-top和padding-bottom的方式实现垂直居中。如果你在使用过程中发现这种方法没见效，那么你可以通过 CSS 为文本设置一个类似table-cell的父级容器，然后使用vertical-align属性实现垂直居中：
此外，你还可以使用flexbox实现垂直居中，对于父级容器为display: flex的元素来说，它的每一个子元素都是垂直居中的：
.flex-center-vertically{display:flex;justify-content:center;flex-direction:column;height:400px;}
值得注意的是，上述方法只适用于父级容器拥有确定高度的元素。
如果上述方法都不起作用，那么你就需要使用被称为幽灵元素（ghost element）的非常规解决方式：在垂直居中的元素上添加伪元素，设置伪元素的高等于父级容器的高，然后为文本添加vertical-align: middle;样式，即可实现垂直居中。
.ghost-center{position:relative;}.ghost-center::before{content:" ";display:inline-block;height:100%;width:1%;vertical-align:middle;}.ghost-centerp{display:inline-block;vertical-align:middle;}
块级元素
已知元素的高度
无法获知元素的具体高度是非常常见的一种状况，比如：视区宽度变化，会触发布局重绘，从而改变高度；对文本施加不同的样式会改变高度；文本的内容量不同会改变高度；当宽度变化时，对于宽高比例固定的元素（比如图片），也会自动调整高度……
如果我们知道元素的高度，可以这样来实现垂直居中：
.parent{position:relative;}.child{position:absolute;top:50%;height:100px;margin-top:-50px;/* account for padding and border if not using box-sizing: border-box; */}
未知元素的高度
如果我们不知道元素的高度，那么就需要先将元素定位到容器的中心位置，然后使用transform的translate属性，将元素的中心和父容器的中心重合，从而实现垂直居中：
.parent{position:relative;}.child{position:absolute;top:50%;transform:translateY(-50%);}
flexbox
使用flexbox实现垂直居中非常简单：
.parent{display:flex;flex-direction:column;justify-content:center;}
水平且垂直居中
通过组合水平居中和垂直居中的技巧，可以实现非常完美的居中效果。我觉得可以将它们分为三种类型：
宽高固定元素
设定父级容器为相对定位的容器，设定子元素绝对定位的位置position: absolute; top: 50%; left: 50%，最后使用负向margin实现水平和垂直居中，margin的值为宽高（具体的宽高需要根据实际情况计算padding）的一半。
.parent{position:relative;}.child{width:300px;height:100px;padding:20px;position:absolute;top:50%;left:50%;margin:-70px00-170px;}
宽高不固定元素
如果无法获取确定的宽高，同样需要设定父级容器为相对定位的容器，设定子元素绝对定位的位置position: absolute; top: 50%; left: 50%。不同的是，接下来需要使用transform: translate(-50%, -50%);实现垂直居中：
.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
使用transform有一个缺陷，就是当计算结果含有小数时（比如0.5），会让整个元素看起来是模糊的，一种解决方案就是为父级元素设置transform-style: preserve-3d;样式：
.parent-element{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;}.element{position:relative;top:50%;transform:translateY(-50%);}
flexbox
使用 flexbox 实现水平和垂直居中，只需使用两条居中属性即可：
.parent{display:flex;justify-content:center;align-items:center;}
结论
你看，使用 CSS 可以让任何元素实现居中效果。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文:https://www.w3cplus.com/css/centering-css-complete-guide.html©w3cplus.com
