CSS系列之你能实现多少种水平垂直居中的布局_css垂直布局

---

我们在日常的开发中，经常会遇到这样一个问题，就是如何实现水平垂直居中对齐。并且在面试中也会出现这样的问题，但是我们往往回答的不是很全部，而导致没有得到面试加分。接下来我们通过不同的方式来实现。

1、定宽高

1.1、绝对定位和负 margin 值

  <div class="parent">
    <div class="children"></div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  position: relative;
}

.children {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.2、绝对定位 + transform

  <div class="parent">
    <div class="children"></div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  position: relative;
}

.children {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1.3、绝对定位 + left/right/top/bottom + margin

  <div class="parent">
    <div class="children"></div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  position: relative;
}

.children {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  display: inline;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.4、flex 布局

  <div class="parent">
    <div class="children"></div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  display: flex;
  justify-content: center;
  align-items: center;
}

.children {
  width: 100px;
  height: 100px;
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.5、grid 布局

  <div class="parent">
    <div class="children"></div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  display: grid;
}

.children {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

1.6、table-cell + vertical-align + inline-block/margin: auto

  <div class="parent">
    <div class="children"></div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.children {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 下方这两个用哪个都可以 */
  margin: auto;
  /* display: inline-block;s */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.7、绝对定位 + calc

  <div class="parent">
    <div class="children"></div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  position: relative;
}

.children {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、不定宽高

2.1、绝对定位 + transform

  <div class="parent">
    <div class="children">楠♥竹</div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  position: relative;
}

.children {
  background-color: red;
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.2、table-cell

  <div class="parent">
    <div class="children">楠♥竹</div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.children {
  background-color: red;
  color: white;
  display: inline-block;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.3、flex 布局

  <div class="parent">
    <div class="children">楠♥竹</div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  display: flex;
  justify-content: center;
  align-items: center;
}

.children {
  background-color: red;
  color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2.4、flex 变异布局

  <div class="parent">
    <div class="children">楠♥竹</div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  display: flex;
}

.children {
  background-color: red;
  color: white;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12

2.5、grid + flex 布局

  <div class="parent">
    <div class="children">楠♥竹</div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  display: grid;
}

.children {
  background-color: red;
  color: white;
  align-self: center;
  justify-self: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2.6、grid + margin 布局

  <div class="parent">
    <div class="children">楠♥竹</div>
  </div>
1
2
3

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  display: grid;
}

.children {
  background-color: red;
  color: white;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12

2.7、writting-mode 属性布局

  <div class="parent">
    <div class="children">
      <p>楠♥竹</p>
    </div>
  </div>
1
2
3
4
5

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(1, 131, 227);
  writing-mode: vertical-lr;
  text-align: center;
}

.parent>.children {
  writing-mode: horizontal-tb;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.parent>.children>p {
  display: inline-block;
  margin: auto;
  text-align: left;
  background-color: red;
  color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

writing-mode 属性定义了文本在水平或垂直方向上如何排布。兼容性上还有些小瑕疵，但大部分浏览器已经支持。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！