如何使用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手册


更多CSS教程: