CSS居中的常见方式有哪些？以及优缺点

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

使用合适、简单、兼容的居中方法是我们翻页读者在整个工作生活中面临的问题。

text-align:center

让我们看一下这个图像和文本居中的示例。如下图所示：

img和文本内容都是内联元素，直接使用textalign♼即可。代码如下所示：

在最外面的div使用text-align: center的问题是所有子元素都会继承这个属性。如果还有一个文字部分用来介绍图片的功能，这个文字也会居中。

如果我们想让这个文本左对齐，我们需要单独设置它的 text-align: left 属性来覆盖其父元素的属性。如果有多个子元素需要执行此操作，则覆盖属性本身并不是一个好主意，因此需要使用不同的方法。

margin: 0 auto

由于显示的图像可以变化，宽度和高度是可变的，但显示区域是固定的，所以一般会明确地为图像设置宽度和高度。此时，如果知道宽度，可以设置 margin: 0 auto 方法。左右边距设置为auto，浏览器会自动设置左右边距。 值是容器剩余宽度的一半。

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

display: table-cell

第一种垂直居中方法是使用-cell

table-cell的一个优点是兼容IE8。

table-cell 属性的缺点：

• 容器的 margin 属性无效，因为 不适用于 表布局。因此，使用 margin: 0 auto 属性无法将 容器 左右居中。解决办法也很简单：只需在容器的外层再添加一个div容器，然后设置这个外层容器的margin：0 auto即可。对于
• 设置为tablecell的元素，如果宽度和高度设置为百分比，则不起作用。常见的场景是将 width 属性设置为外容器宽度的 100%。解决办法就是将容器的宽度设置为一个较大的值，例如5000px，然后达到目标的100%。
• 如果容器应将位置设置为绝对♼属性将无效。因为设置 position:absolute 将强制元素 display 键入 block。解决方案是在外层放置一个 div 容器，并将 position:absolute 属性应用于该容器。 OnPosition：相关

  解决Table-Cell第三个缺点

  的第三个缺点有一个副作用，就是设置内层Container

  和th。 如果是百分比则无效。因此，存在无法使用视图：表格单元格垂直居中的情况。

  这意味着页面上会弹出一个框。该框的位置应位于当前屏幕的左、右、上、下中央。此时，您通常应该将此框的position设置为absolute。这个时候，table-cell就不起作用了。

  解决办法是使用相对定位，将top设置为50%，设置弹出窗口的起始位置，然后将放在页面中央边距 - top

  是元素高度的负一半，因此弹出窗口在页面中间向上移动到其自身高度的一半，即正好位于中间。左右居中也可以用同样的方法处理。

  使用这种方法的缺点是需要知道具体的高度，无法根据内容的长度进行调整。

  transform：translate

  使用方法transform更改margin-top的负值：translate (0, -50 % ) 因为 中的百分比translate是根据元素本身的高度来计算的，这样可以达到自适应的效果。

  这个方法非常方便，加上前缀-webkit-就可以兼容IE9。 InMargin-Top: -100px

  和 Transform: Translate (0, -50%) 有一个缺点，即。 位置 如果为绝对，可能会导致断线。

  必须是具有显式 p 元素的行，但它们是换行符。这是因为 i 放置在 relative 元素中位于 absolute 的子元素将在行元素内换行，以免超出容器的边界。由于 left 设置为 50%，p 超出限制，因此它会分成新行。即使设置了翻译：-50%，也已经太晚了。

  flex布局

  flex布局非常容器且实用。您只需要在子容器中设置 3 个属性。

  .container{
      display: flex;
      align-items: center;
      justify-content: center;
  }
  复制代码

  但是flex的缺点是不支持IE

  vertical-align:middle❀❀主要用在行内元素中。

  如果不进行处理，默认垂直居中基于基线。

  为了能够垂直居中，必须改变居中方法。

  每个元素都必须设置。

  如果容器的高度高于图像，则会出现如下空洞效果：

  使内容在容器上下居中，您可以将文本的行高设置为容器的高度，使文本上下居中。由于图像和文本垂直居中，因此图像在容器中也上下居中。

  换句话说，如果您需要将图像垂直居中在小于div高度的div，您可以添加一个元素来使其lineheight 等于 div 的高度。然后使用伪元素 ::before 添加line-height。

  或者使用属性 display: inline-block 加上 height: 100%。该方法具有较好的兼容性。

  绝对和边距：自动

  使用绝对定位和边距：自动居中方法。如果

  图像大于 容器，则此方法将不起作用。因为有一个比较常见的场景：图像的一侧有contians那么大，另一侧按照图像比例进行缩放，图像显示在中间，多余的部分被截断。在这种情况下，只需将左/右/上/下设置为一个较大的负值即可。

  作者：zhangwinwin
链接：https://juejin.im/post/5ed1b567518825430c3abcd2
来源：掘金属于作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。