如何使用CSS将元素居中

在某些情况下，使用CSS居中元素总是很容易的，而在其他情况下则很难。这是如何以CSS为中心以及现代CSS技术的完整列表

如果需要水平或垂直居中，则在CSS中居中元素是一项非常不同的任务。

在这篇文章中，我将解释最常见的场景以及如何解决它们。如果提供了新的解决方案弹性盒我忽略了旧技术，因为我们需要继续前进，并且Flexbox多年来一直受浏览器支持（包括IE10）。

文本很简单，可以使用text-align属性设置为center：

p {
  text-align: center;
}

将非文本内容居中的现代方法是使用Flexbox：

#mysection {
  display: flex;
  justify-content: center;
}

里面的任何元素#mysection将水平居中。

Center horizontally

如果您不想使用Flexbox，这是另一种方法。

通过在左边和右边应用自动边距并设置元素的宽度，可以将所有非文本内容居中放置：

section {
  margin: 0 auto;
  width: 50%;
}

以上margin: 0 auto;是以下内容的简写：

section {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

记住将项目设置为display: block如果它是一个内联元素。

传统上，这一直是一项艰巨的任务。现在，Flexbox为我们提供了一种以最简单的方式完成此操作的好方法：

#mysection {
  display: flex;
  align-items: center;
}

里面的任何元素#mysection将垂直居中。

Center vertically

可以组合使用Flexbox垂直和水平居中的技术，以完全将页面中的元素居中。

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

Center both vertically and horizontally

可以使用CSS网格：

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

免费下载我的CSS手册