CSS 四中方法实现水平 垂直居中

CSS 四中方法实现水平 垂直居中

效果

结构

  <div class="a">
    <div class="b">div>
  div>
1
2
3

样式

方法一

.a {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  background-color: crimson;

  // 核心代码
  display: flex;
  justify-content: center;
  align-items: center;
}

.b {
  width: 200px;
  height: 200px;
  background-color: bisque;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

方法二

.a {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  background-color: crimson;

  // 核心代码
  position: relative;
}

.b {
  width: 200px;
  height: 200px;
  background-color: bisque;

  // 核心代码
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

方法三

.a {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  background-color: crimson;

  // 核心代码
  position: relative;
}

.b {
  width: 200px;
  height: 200px;
  background-color: bisque;

  // 核心代码
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // margin-top: -50%;
  // margin-left: -50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

方法四

.a {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  background-color: crimson;

  // 核心代码
  display: grid;
  place-items: center;
}

.b {
  width: 200px;
  height: 200px;
  background-color: bisque;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16