CSS居中的常用方式以及优缺点

前言

居中是页面开发中经常遇到的问题。

使用合适的、简单的、兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题。

text-align:center

来看这个例子，一张图片和文字进行居中。如下图所示：

 

img与文字内容都是行内元素，因此直接使用text-align就行了。代码如下图所示：

 

在最外层的div中使用text-align：center的问题是，会导致所有的子元素都会继承这个属性。如果还有一段文字用作介绍该图片的作用时，这段文字也会被居中。

而我们希望这段文字是左对齐的，就不得不单独设置其text-align：left属性，以覆盖其父元素的属性。并且如果还有更多的子元素也需要这样做，覆盖属性本身就是下策，因此要采用其他方法。

margin: 0 auto

由于显示的图片可能是变化的，宽高是不定的，但显示区域是固定的，所以一般会显式地给图片设置一个宽高。这个时候知道宽度就可以设置margin：0 auto方法，左右的margin设置为auto，浏览器就会自动设置左右的margin值为容器剩余宽度的一半。

 

使用margin: 0 auto可以说是最常用的左右居中的方法，不仅适用于块级元素也适用于行内元素。很多网页的布局都是使用margin: 0 auto，例如淘宝pc端，如下图所示：

 

display: table-cell

第一个垂直居中的方法是借助table-cell属性，效果图如下：

 

table-cell的一个好处就是它可以兼容到IE8。

table-cell属性的缺点：

• 容器的margin属性失效，因为margin不适用于表格布局。所以使用margin: 0 auto属性是不能使container左右居中的。解决的方法也很简单：只需要在container外层再多套一个div容器，然后设置这个外层容器的margin: 0 auto即可。
• 设置了table-cell的元素再设置宽高为百分比是不起作用的。常见的场景是要将宽度属性设置为外层容器宽度的100%，解决方法是将container的宽度设置成一个很大的值，例如5000px，这样就达到100%的目的。
• 如果container需要设置position为absolute，table-cell属性就会失效。因为设置position: absolute就会把元素display强制设置为block类型。解决办法还是在外层套一层div容器，将position: absolute属性作用于这个容器上。

position: relative

上面所说table-cell的第三缺点的解决方法有一个副作用，就是设置内层container的height和width为百分比时会失效。由于这个原因，导致有一种情况不能使用display：table-cell垂直居中。

就是需要在页面弹出一个框，这个框的位置需要在当前屏幕中左右上下居中。这时候通常需要将这个框的position设置为absolute，这个时候table-cell就不能发挥作用了。

解决办法是使用relative定位，设置top为50%，将弹窗的起始位置放到页面中间，再设置margin-top为元素高度的负一半，这样使得弹窗在页面中间位置再往上移到一半自身的高度，这就正好在中间了，左右居中也可类似处理。

使用此方法的缺点是需要知道具体的高度，无法根据内容长短自适应。

tranform: translate

用tranform方法，将margin-top一个具体像素的负值改成transform: translate(0, -50%)，因为translate里面的百分比是根据元素本身的高度计算的，所以就可以达到自适应的效果。

这个办法十分方便，而且加上-webkit-前缀，可以兼容到IE9。

而margin-top：-100px与transform：translate(0, -50%)都有一个缺点，就是如果设置left为50%是借助position为absolute的话，可能会导致换行

 

本来应该是一行显式的p元素却换行了，这是因为在一个relative元素里面的absolute定位的子元素会通过行内元素换行的方式，尽可能不超过容器的边界。由于设置left为50%，导致p元素超了边界，所以就换行了，即使再设置translate：-50%也已经晚了。

flex布局

flex布局十分容器和方便，只需在副容器设置3个属性就行了

.container{
    display: flex;
    align-items: center;
    justify-content: center;
}

 

 

但flex的缺点是不支持IE

vertical-aligin:middle

vertical-aligin:middle主要是运用在行内元素中的。

如果不做任何处理，那么默认的垂直居中是以baseline为基准的。

为了能够垂直居中，需要改变居中方式。

要每个元素都要设置。

如果container的高度比图片要高，就会有留空的效果，如下：

 

为了让中间的内容能够在container里上下居中，可以设置文字的line-height为container的高度，这样文字就上下居中了。由于图片与文字是垂直居中的，所以图片在container里也是上下居中了。

 

也就是说，如果需要垂直居中一个div里的比div高度小的图片，可以添加一个元素，让它的line-height等于div的高度。下面使用伪元素::before来添加line-height。

 

或者使用display: inline-block属性，加上height: 100%。这个方法兼容性更好。

 

absolute与margin：auto

使用absolute定位与margin：auto方法也可以实现居中。

 

如果图片比container大，这种方法就不适用了。因为有一个种比较常见的场景：图片有一边和contianer一样大，另一边按图片的比例缩放，图片居中显示，超出的截断。这种情况下，只需把left/right/top/bottom设置为一个很大的负值即可。

 

总结

以上就是css中常用的居中方法，如果有更好的方法评论区留言讨论。

作者： zhangwinwin
链接：CSS居中的常用方式以及优缺点
来源：github