【CSS】CSS水平居中方案

CSS水平居中方案

1. 行内元素水平居中

设置父元素的text-align:center

.box {
  width: 300px;
  height: 300px;
  margin: 100px auto;

  text-align: center;

  background-color: pink;
}
1
2
3
4
5
6
7
8
9

2. 块级元素水平居中

当块级元素设置了明确的宽度数值时，可以使用margin: 0 auto

3. 绝对定位

<div class="container">
  <div class="box"></div>
</div>
1
2
3

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: orange;
}
.box {
  position: absolute;
  left: 0;
  right: 0;

  width: 100px;
  height: 100px;

  background-color: pink;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. flex布局

<div class="container">
  <div class="box"></div>
</div>
1
2
3

.container {
  display: flex;
  justify-content: center;

  width: 300px;
  height: 300px;
  background-color: orange;
}
.box {
  width: 100px;
  height: 100px;

  background-color: pink;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5. 利用形变trnasform:trnaslate()

.container {
  width: 300px;
  height: 300px;
  background-color: orange;
}
.box {
  position: relative;
  left: 50%;
  width: 100px;
  height: 100px;

  background-color: pink;

  transform: translateX(-50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15