在CSS中如何居中这事儿是CSS为人所抱怨的典型代表之一。“为毛它这么难？%>_<%”，开发者们抱怨道。我认为这个问题的关键不在于处理CSS居中难做，而在于根据不同的场景，有太多不同的方法来解决居中问题，以至于你无从下手，不知道哪种方法能满足你的需要。
因此，我们来做一个决策树，让这事儿变得更简单一些。
首先，我的需求居中
水平居中
1.是inline或者inline-*元素，比如文本或者链接？
对于父元素是块级元素的内联元素来说，你只需要这么做
```
.center-children{
text-align:center
}
```
demohttp://codepen.io/chriscoyier/pen/HulzB
2.一个块级元素？
你只需要给这个块级元素指定margin-left和margin-right的值为auto(当然，这个块级元素本身应该被显示的指定width，否则这个块级元素的将占据整行的宽度，也就没有居中的需要了)
.center-me{
margin:0 auto
}
demohttp://codepen.io/chriscoyier/pen/eszon
不管它或者它的父级宽度是多少，这样的设置，你都能得到想要的结果。 另外：请注意，不要使用float把一个元素居中。虽然，这儿有个小技巧（戳我）。。。
3.多个块级元素？
如果你想让两个或者两个以上的块级元素在一行上面水平居中，那么最好的办法是改变他们display的类型。这儿给两个例子，一个使用inline-block，另一个使用flex。
demohttp://codepen.io/chriscoyier/pen/ebing
当然，如果你的意思是让多个块级元素堆积叠加显示在一条竖列上，那么设置左右外边距的值为auto这一方法依然有效。
demohttp://codepen.io/chriscoyier/pen/haCGt
垂直居中
垂直居中在CSS中有一点小麻烦
1.是inline或者inline-*元素，比如文本或者链接？
1.1 单行？
有时候，只要内联或者文本元素具备相同的上下内边距，它们便能够垂直居中显示。
.link {
padding-top: 30px;
padding-bottom: 30px;
}
demohttp://codepen.io/chriscoyier/pen/ldcwq
然而，当因为某些原因，设置padding成为一个不可选选项，而你又需要居中一些不需要换行的文本时，将line-height和height设为相同的大小的值是一个不错的选择。
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
demohttp://codepen.io/chriscoyier/pen/LxHmK
1.2 多行？
将上下内边距设置为相同大小从而使得单行文本垂直居中，这一方法对多行文本同样有效。但是，如果在某些情况这一方法失效了怎么办？也许，可以通过使用表格元素或者使用CSS，将这些文本元素显示在一个表格单元格内（table cell）。在这种情况下，使用vertical-algin属性处理居中与它通常在一行中处理元素的居中有所不同。（查看更多关于vertical-algin的知识点，看这儿https://css-tricks.com/what-is-vertical-align/）
demohttp://codepen.io/chriscoyier/pen/ekoFx
除此之外，你还可以使用flexbox，单个flex-child元素能够很方便的被设置为垂直居中，相对于它的父级元素。
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
demohttp://codepen.io/chriscoyier/pen/uHygv
请记住，只有当父容器具有固定高度（px, %, etc），当前容器才具有高度。两者是相互关联的。
如果上面方法都不适用，你还可以使用“幽灵元素”这一方法。即将一个具有100%高度的伪元素放到容器内，文本以此来垂直居中。
.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;
}
demohttp://codepen.io/chriscoyier/pen/ofwgD
2.是一个块级元素？
2.1 知道元素高度
在网页布局中，不知道元素的具体高度（即高度非固定值）是很常见的，原因很多。比如，如果宽度变化，文本流需要改变它的高度以显示文本；文本样式变化；文字数量变化；具有固定宽高比元素调整大小变化，比如图片等等，都能引起高度变化。
但是，如果你知道高度，你可以这么来垂直居中：
.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; */
}
demohttp://codepen.io/chriscoyier/pen/HiydJ
2.2 不知道元素高度
在不知道元素高度的情况，依然可以做到垂直居中，即通过下移其父级高度的一半，再向上移动其自身高度的一半。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
demohttp://codepen.io/chriscoyier/pen/lpema
3.使用flexbox
不要惊讶，这种情况下使用flexbox会很方便
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
demohttp://codepen.io/chriscoyier/pen/FqDyi
垂直居中 && 水平居中
你可以将上面的提到的方法以任意方式组合起来，从而得到完美的居中元素。但是，我发现，通常主要有以下三种方式。
1.元素具有固定的宽度和高度？
使用负外边距，将其值设为宽度和高度的一半。这样，在你将元素在绝对定位并且设置50%和50%的上/左偏移后，元素位置将居中。这一方法是跨浏览器支持的。
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
demohttp://codepen.io/chriscoyier/pen/JGofm
2.元素宽度和高度未知？
如果你不知道元素的宽度或者高度，你可以使用transform属性，即translate(-50%, -50%)，在横向、纵向上都偏移自身高度的一半以居中。这一偏移是基于浏览器计算后得到的元素自身的宽度和高度。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
demohttp://codepen.io/chriscoyier/pen/lgFiq
3.使用flexbox？
要在flexbox中是的两个方向上都居中，你需要使用两个居中属性：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
demohttp://codepen.io/chriscoyier/pen/msItD
结果
好了，现在你可以用CSS中得到想要的居中结果了！
PS：初次翻译，如有问题，请原谅批评指正。如果您发现文章那儿翻译错误或不妥，请留言指出！
PS2：简书插入代码块没搞会，o(╯□╰)o，代码和代码块的问题下次一块儿来调。
网友评论