css居中

发表于 | 分类于 | 阅读次数

水平居中

是否是 inline 或 inline-* 元素（比如文本或链接)?

在块级的父元素中添加

1
2
3
.center-children {
  text-align: center;
}

这对 inline，inline-block，inline-table，inline-flex都有效。

是否是块级元素？

你可以通过给块级元素设置 margin-left 和 margin-right 或者 auto 来居中它。

1
2
3
.center-me {
  margin: 0 auto;
}

不管块级元素的宽度设置多少，我们都可以用这种方式来居中。

多个块级元素？

如果需要在一行内居中两个或者更多的块级元素，可以将他们转换显示类型。

  1. 将块级元素转换为 display: inline-block;，然后给其父元素添加 text-align: center;
  2. 给父级设置 display: flex; justify-content: center;

垂直居中

是否是 inline 或 inline-* 元素（比如文本或链接)?

单行？

单行居中的话，只需要设置相同的上下 padding 即可。

1
2
3
4
.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

如果不想设置 padding 的话，那么还有一个办法，将 line-height 和 height 设置成一样的高度。

多行？

给多行内联元素设置相同的上下 padding 也是可以做到居中的。但是如果这样不起作用，那么文本所在的元素可能是表格的单元格，我们用 vertical-align: middle 解决。

1
2
3
4
5
6
7
8
9
10
11
<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  background: #f06d06;
  font-size: 80%;
}
table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}
1
2
3
4
5
6
7
.center-table {
  display: table-cell;
  height: 250px;
  background: white;
  width: 240px;
  vertical-align: middle;
}

觉得表格 out 了？那么试试 flex 吧

1
2
3
4
5
6
.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

请记住，如果父容器具有固定高度（px，％等），那么它才真正起作用，这就是为什么这里的容器有一个高度。

如果这两种技术都没有了，那么可以使用“ghost element”技术，在该技术中，将全高伪元素放置在容器内，并且文本与该元素垂直对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
  width: 190px; // 注意宽度一定要有
}

是否为块级元素？

知道块级元素的高度吗？

不知道网页布局的高度是相当普遍的，有以下几个原因：如果宽度改变，那么文本重排会改变高度。文字造型的差异可以改变高度，文字数量的变化可以改变高度。具有固定宽高比的元素（如图像）可在更改大小时更改高度，等等。

但是，如果你知道元素的高度的话，那么你可以用下面的方法来居中。

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

不确定的高度？

如果不知道块级元素的高度，那么可以这样做

1
2
3
4
5
6
7
8
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

用 flex 了吗？

1
2
3
4
5
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
1
2
3
4
5
.parent {
  display: flex;
  align-item: center;
  justify-content: center;
}

水平垂直同时居中

您可以以任何方式将上述技巧结合起来，以获得完美居中的元素。但我发现这通常分为三个阵营：

元素是不是弹性的宽度和高度？

使用等于该宽度和高度的一半的负边距，在将其绝对定位在50％/ 50％后，将以极佳的跨浏览器支持为中心：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

元素是不是不确定的宽度和高度？

如果您不知道宽度或高度，则可以使用transform属性和两个方向上的50％负向平移（它基于元素的当前宽度/高度）居中：

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

用 flex 了吗？

要使用flexbox在两个方向上居中，您需要使用两个居中属性：

1
2
3
4
5
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

用 grid 了吗？

1
2
3
4
5
6
7
body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

本文结束，感谢阅读。

本文作者：melody0z
本文链接：https://melodyvoid.github.io/CSS/css-centered.html
欢迎转载，转载请注明文本链接

坚持原创技术分享，您的支持将鼓励我继续创作！