原文: How to Center Anything with CSS - Align a Div, Text, and More

引言

居中布局是 CSS 知识点中最难的之一。

居中方式本身不难理解,只是居中方式太多,难以判断应该用哪个、怎么用。

你需要考虑要让哪个 HTML 元素居中,以及让它水平还是垂直居中,以选择相应的居中方式。

这篇文章会介绍如何水平、垂直、水平且垂直居中不同的元素。

如何水平居中

元素的水平居中比垂直居中简单一点。在日常工作中,你可能需要水平居中以下元素,可以采用以下不同方式。

使用 CSS Text-Align 属性居中文本

要水平居中文本或者链接,可以使用 text-align 属性,将值设置为 center

<div class="container">
  <p>Hello, (centered) World!</p>
</div>
p {
  text-align: center;
}
image-15
image-15

使用 CSS Margin Auto 居中 Div

一个简短的写法是将 margin 属性的值设置为 0 auto,即可水平居中块元素,如div

<div class="container">
  <div class="child"></div>
</div>
.child {
  ...
  margin: 0 auto;
}
box-centered-horizontally

Flexbox 水平居中 Div

Flexbox 是最现代的居中方式,使响应式布局的实现比以前更简单。但是,有些旧版浏览器(比如 Internet Explorer)不能完全支持 Flexbox。

要使用 Flexbox 水平居中元素,直接在父级元素使用 display: flexjustify-content: center

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  display: flex;
  justify-content: center;
}
box-centered-horizontally-1

如何垂直居中

不使用 Flexbox 这样的现代方式而垂直居中元素是真的挺麻烦的。下面我们先用一些比较老的方法垂直居中元素,然后使用 Flexbox 试试看。

如何用 CSS 绝对定位和负边距垂直居中 Div

在此前很长一段时间内,开发人员使用这个方法让元素垂直居中。要使用这个方法,你必须知道需要居中的元素的高。

首先,设置父元素的 display 属性值为 relative

然后把子元素的 position 的值设置为 absolutetop 属性的值设置为 50%

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
}
box-centered-vertically-1

不过这样只是垂直居中了子元素的上边沿。

要真正居中子元素,需要设置 margin-top 属性的值为 -(half the child element's height)

.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* half this element's height */
}
box-centered-vertically-final

Transform 和 Translate 垂直居中 Div

在不知道元素高的情况下(甚至是知道高),可以使用一个很有技巧的方法垂直居中元素。

这个方法和负边距方法类似,设置父元素的 display 属性值为 relative

对于子元素,设置 display 属性值为 absolute ,设置 top 属性值为 50%。接下来,不使用负边距居中子元素,而是使用 transform: translate(0, -50%)

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
box-centered-vertically-final-1

注意 translate(0, -50%)translateX(0)translateY(-50%) 的简写。你也可以写成 transform: translateY(-50%),来垂直居中子元素。

Flexbox 垂直居中 Div

就像水平居中元素一样,Flexbox 使垂直居中元素变得超级简单。

设置父元素的属性值为 display: flexalign-items: center,即可真正垂直居中元素:

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  display: flex;
  align-items: center;
}
box-centered-vertically-final-2

如何垂直且水平居中元素

CSS 绝对定位和负边距使元素垂直且水平居中

这个方法和上面垂直居中元素的方法非常类似。你需要知道需要居中的元素的宽和高。

设置父元素的 display 属性值为 relative

然后设置子元素的 display 属性值为 absolutetop 属性值为 50%left 属性值为 50%。这样只是将子元素的左上角垂直且水平居中。

要真正地居中子元素,需要用子元素高的一半设置一个负的顶部边距值,同时使用子元素宽的一半设置一个负的左边距值:

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
}
box-centered-vertically-and-horizontally

如何使用 Transform 和 Translate 垂直且水平居中 Div

如果你不知道具体的尺寸,也不能使用 Flexbox,那么你可以使用这个方法来垂直且水平居中一个元素。

首先,设置父元素的 display 属性值为 relative

然后,设置子元素的 display 属性值为 absolutetop 值为 50%left50%

最后,使用 transform: translate(-50%, -50%) 真正居中子元素:

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
box-centered-vertically-and-horizontally-1

如何使用 Flexbox 垂直且水平居中 Div

Flexbox 是垂直且水平居中元素的最简单的方式。

这个方法结合了上面提过的两种 Flexbox 方式,然后使用 justify-content: centeralign-items: center 垂直且水平居中子元素:

<div class="container">
  <div class="child"></div>
</div>
.container {
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}
box-centered-vertically-and-horizontally-2

以上就是一些最好用的居中方法。现在,你可以试试看居中元素了。