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中经常使用的居中方法，若是有更好的方法能够在评论区留言教教我。

参考

本文参考如下资料

• 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
• 六种实现元素水平居中
• 高效前端：Web高效编程与优化实践

结尾

更多文章请移步楼主github,若是喜欢请点一下star,对做者也是一种鼓励。