CSS 实现垂直水平居中的 5 种方式

414次阅读  |  发布于2年以前

本文将给大家分享一下使用HTML和CSS实现垂直和水平居中的五种不同方式。

可能还有其他居中方法（例如，使用margin: auto），但为了简单起见，同时按照事物演变的背景，本文将仅介绍这五种居中方法：

  1. 使用表格
  2. 使用负边距
  3. 使用转换
  4. 使用Flex布局
  5. 使用Grid布局

很多人在面试过程中，如果遇到要求将页面上的一个元素垂直和水平居中的问题，往往无法给出正确的答案。希望这篇文章能对大家有所帮助。

方法一：使用表格

注意：请避免使用这种方法。

在最开始，因为没有简单的方法做到居中元素，所以我们使用表格来垂直和水平居中。当然，这是一种糟糕的做法，但却是早期时候唯一可用的选择。

思路是添加一个具有单个单元格的表格，并将该单元格垂直和水平居中：

<table>
  <tr>
    <td>
      Centered content
    </td>
  </tr>
</table>
table {
  width: 100%;
  height: 100%;
}

td {
  vertical-align: center;
  text-align: center;
}

之所以说这种方法错误，原因有很多：

因此，这种方法并不推荐。所以我们不再使用这种方法，换了其他更好的。

方法二：使用负边距

注意：避免使用这种方法。

将元素以绝对定位的方式垂直和水平移动到容器的50%，然后分别在顶部和左侧应用一半高度和宽度的负边距：

<div>Centered content</div>

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 60px;
  line-height: 60px;
  margin-left: -100px;
  margin-top: -30px;
  text-align: center;
}

这种方法比前一种方法好，但还是有一些缺点：

有些人可能会说，“怎么不使用CSS变量和calc函数来避免这些问题？”，是的，“现在”来看这样做是正确的，记住是现在。但是那时候，CSS自定义属性并没有那么多浏览器支持，对calc的支持也只是稍微好那么一丁点儿。

方法三：使用转换

这种方法与上一种方法很接近。将元素绝对定位到顶部和左侧的50%，然后使用transform转换为一半大小：

使用这种方法，我们还需要指定宽度和高度，这并不总是可行的。

<div>Centered content</div>

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

转换的百分比与元素的尺寸有关。因此，转换-50%表示转换一半大小分别到左侧和顶部。而无需知道元素的大小。

这种水平垂直居中的方法在一段时间内是大家公认的常用方法。因为非常简单（只有4个CSS属性），也不依赖于任何其他元素（除了你可能需要容器中的定位）或其他HTML元素。

这种方法的一个缺点是，position: absolute会使元素脱离页面的正常文档流。结合变换，可能会导致元素与页面上的其他元素重叠。

方法四：使用Flex布局

前一种的方法流行了很久，可以说用起来还是蛮得心应手的。但随后，出现了用CSS布局内容的新方法：Flexbox（弹性盒子）和Grid（网格）。这给内容的定位和对齐（不仅仅是居中）提供了无限可能。

使用弹性盒子（和网格）居中的有趣之处在于进入容器的是样式而不是元素本身：

<div>Centered content</div>

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

你可以将这看作是布局内容更“自然”的方法。一个或多个元素（flexed容器的子元素）的一起使用，可以提供比之前方法更多的选项。

居中多行内容时可能会出现一个问题。默认情况下，文本仍将左对齐，所以可能不会给人居中的感觉。这是因为居中的是元素本身而不是其内容。在某些情况下，你可能需要执行text-align: center以便使所有内容都完全居中。

方法五：使用Grid网格布局

我们可以使用网格应用与弹性盒子相同的属性，只需把display的值从flex更改为grid即可，它们的工作原理是一样的：

<div>Centered content</div>

div {
  display: grid;
  align-items: center;
  justify-content: center;
}

这个方法的思路是使用带有单个单元格和绝对中心的网格（有点像我们对表格所做的，但这次具有适当的语义且不涉及额外的HTML元素。）。

可以将align-items和justify-content组合成一个属性：place-items，代码更简短：

<div>Centered content</div>

div {
  display: grid;
  place-items: center;
}

是的，只需两行CSS就可以垂直和水平居中内容。

当容器内有多个元素时，网格和弹性盒子方法可能会增加难度。在这些情况下，有一个简单的解决方案是将所有内容包装在附加标签中。但是，一般来说，没有必要一定要这样做。

总结

如何用CSS实现居中是一项实用且有价值的技能。它将在你web开发生涯发光发热为你发挥作用。而且，正如我们在本文中看到的那样，方法也没有那么复杂。

你可以使用任何水平和垂直居中的方法（但请避免使用表格布局）。我通常使用的是transform: translate(-50%, -50%) (方法三) 和FlexBox/Grid (方法四或者方法五），具体视情况而定。

面试小技巧：如果面试官要求你水平和垂直居中元素，但在应用FlexBox/Grid方法后只能够水平居中。那么请检查父级是否设置了height属性。

感谢大家的阅读。

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8