CSS中如何完美做到居中，一直是令前端工程师头疼的问题。最近读到CSS-TRICKS中的一篇帖子，将居中问题的解决方案策略化。感觉收获很大，翻译过来供大家交流学习。
当我们书写CSS时，让元素居中，是抱怨的爆发点之一：为什么会这么难？
我认为问题的关键，不在于怎么做，而在于我们如何从诸多居中方法中选择出适应当前情景的。
所以接下来，让我们一起创建一颗决策树，希望可以让居中变得简单。
水平居中
行内元素
我们可以通过对其父级块元素做如下处理来使行内元素居中。适用于inline,inline-block,inline-table,inline-flex等。
.center-children{
text-align: center;
}
示例：传送门
块级元素
我们可以通过将一个块级元素的margin-left和margin-right同时设置为auto来使其居中。（注意：此时元素必须定义有width，否则将填满宽度，谈不上水平居中。）通常由以下简写来定义：
.center-me {
margin: 0 auto;
}
示例: 传送门
多个块级元素
当同一行中有两个或以上块级元素需要居中时，我们不得不通过改变display的类型来实现。下面的例子分别将display设置为inline-block以及flexbox的例子。
示例: 传送门
当你指的是多个位于同一列上的块级元素时，将margin设为auto的技术依旧生效。
示例: 传送门
垂直居中
在CSS中做到垂直居中，我们需要稍微狡猾一点。
行内元素
单行
有时行内元素或文本能够做到垂直居中，仅仅是因为元素上、下的padding相等。
.link {
padding-top: 30px;
padding-bottom: 30px;
}
示例: 传送门
在某些情况当padding不适用，并且文字不会换行时，有一个技巧：当line-height与height相等时，文字垂直居中。
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
示例: 传送门
多行
上下padding相等依旧可以解决这个问题。但当此方法不生效时，可能是元素或文本处于table cell中，要么是html语义中的table，要么是CSS中的设置。这种情况下，我们使用vertical-align来完成垂直居中。注意：此为特殊用法，vertical-align平时用来处理一行中的元素如何排列。
示例: 传送门
如果类似table的那些无效时，也许我们应该尝试下flexbox。 在flex中，一个子元素可以轻易地在父元素中居中。
flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
示例: 传送门
记住，这种做法仅在腹肌元素高度固定时(px, %等)才有效。
如果上述两种做法都无效，那么我们可以采用“幽灵元素”技术。在这种做法中，一个伪元素占据父元素的全部高度，然后文本在其中垂直居中。
.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;
}
示例: 传送门
块级元素
高度已知时
由于诸多原因，很多情况我们无法得知元素的高度，比如：当宽度变化时，文字的重绘会改变高度；文字样式的变化可能改变高度；文字数量的变化可能改变高度；宽高比固定的元素，比如图片，在改变大小时也会改变高度，等等。
但当我们知道高度时，可以按照如下方法实现垂直居中：
.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; */
}
示例: 传送门
高度未知时
在这种情况下，我们仍然可以实现垂直居中：将元素下移父级元素的50%，再上移自身高度的50%。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
示例: 传送门
可以使用flexbox时
不算什么大的惊喜，在flexbox中，这可容易多了。
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
示例: 传送门
同时水平和垂直居中
我们可以通过结合使用前面讲述的技巧来实现将元素完美居中。主要有以下三种情况：
元素宽高固定时
此时可以使用绝对定位将元素置于父元素(50%，50%)的位置，之后再通过将margin设置为负值。这种方法拥有广泛的浏览器支持。
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
示例: 传送门
元素宽高不固定时
当宽高不固定时，我们可以使用transform属性来实现将元素在两个方向同时移动50%。该宽度基于当前元素的宽度。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
示例: 传送门
可以使用flexbox时
此时我们需要使用两个居中属性：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
示例: 传送门
补充额外一种兼容性很好的方法
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
结论
我们完全可以在CSS中实现居中。
网友评论