Centering-in-CSS-A-Complete-Guide

发表于 分类于

https://css-tricks.com/centering-css-complete-guide

以前也总结过一篇 CSS 居中，但是感觉那一篇结构有点乱，上面的这篇文章的结构和思路比较清楚，记录一下。

水平居中

对于 inline 属性的元素

让一个块级父元素包裹它，然后设置 text-align:center。

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

对于 inline 属性的元素如 inline, inline-block, inline-table, inline-flex 是有效的。

对于块级元素

赋予它 margin-left:auto 和 margin-right:auto 使其居中（它必须有确定的 width ，否则它将是全宽度不需要居中）。

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

对于多个块级元素

如果想让多个块级元素在一行居中，最好是改变它们的 display 为 inline-block ，或者使用 flexbox。

1
2
3
4
5
6
7
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
1
2
3
4
.flex-center {
  display: flex;
  justify-content: center;
}

如果想让多个块级元素在一列居中，margin:0 auto 依然有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
main div {
  background: black;
  margin: 0 auto;
  color: white;
  padding: 15px;
  margin: 5px auto;
}

main div:nth-child(1) {
  width: 200px;
}
main div:nth-child(2) {
  width: 400px;
}

垂直居中

对于 inline 属性的元素

单行

对于标签来说，如 a 标签，包裹它的父元素的 padding-top 和 padding-bottom 相等就可以使它垂直居中。

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

对于单行文本来说，让 height 和 line-height 相等即可。

1
2
3
4
5
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

因你而在

多行

使用 table 标签或者让它类似 table 的表现形式（借助 vertical-align）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
}

因你而在

或者使用 flexbox。

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

对于块级元素

已知元素高度

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%);
}

不介意增加父元素高度

Using tables or CSS display to make elements into tables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
main {
  background: white;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  padding: 20px;
  display: table;
}
main div {
  background: black;
  color: white;
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
}

使用 flexbox

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

水平垂直居中

已知元素宽高

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;
}

未知元素宽高

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

使用 flexbox

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

使用 grid

This is just a little trick that will pretty much work for one element:

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