CSS居中的各类实现方式

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中实现居中。

译自：css-tricks.com/centering-c…