水平居中和垂直居中方案

#

# 水平居中方案

行内级元素设置父元素的text-align: center
块级元素设置当前块级元素的宽度 margin: 0 auto

.container {
  width: 500px;
  height: 400px;
  background-color: beige;
}
.box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  background-color: aqua;
}

1
2
3
4
5
6
7
8
9
10
11
12

<div class="container">
  <span>行内元素水平居中</span>
  <div class="box">块级元素水平居中</div>
</div>

1
2
3
4

// Make sure to add code blocks to your code group

绝对定位在元素有宽度的情况下设置left: 0; right: 0; margin: 0 auto

.container {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: beige;
}
.box {
  position: absolute;
  left: 0;
  right: 0;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color: aqua;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="container">
  <div class="box">块级元素绝对定位水平居中</div>
</div>

1
2
3

// Make sure to add code blocks to your code group

flex 布局设置 flex 容器justify-content: center

.container {
  display: flex;
  justify-content: center;
  width: 500px;
  height: 400px;
  background-color: beige;
}
.box {
  width: 200px;
  height: 200px;
  background-color: aqua;
}

1
2
3
4
5
6
7
8
9
10
11
12

<div class="container">
  <div class="box">flex水平居中</div>
</div>

1
2
3

// Make sure to add code blocks to your code group

实现效果图同上

# 垂直居中方案

绝对定位

实现方式：在元素有高度的情况下设置 top:0; bottom:0; margin: auto 0
弊端
- 必须使用定位，脱离了标准流
- 必须给元素设置高度

.container {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: beige;
}
.box {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 200px;
  height: 200px;
  background-color: aqua;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="container">
  <div class="box">绝对定位垂直居中</div>
</div>

1
2
3

// Make sure to add code blocks to your code group

flex 布局

实现：直接使用 flex

弊端
- 当前 flex 容器中的素有元素都会被垂直居中
- 相对于前面一种方式，兼容性差

.container {
  display: flex;
  align-items: center;
  width: 500px;
  height: 400px;
  background-color: beige;
}
.box {
  width: 200px;
  height: 200px;
  background-color: aqua;
}

1
2
3
4
5
6
7
8
9
10
11
12

<div class="container">
  <div class="box">flex 垂直居中</div>
</div>

1
2
3

// Make sure to add code blocks to your code group

使用top和translate一起使用

.container {
  width: 500px;
  height: 400px;
  background-color: beige;
}
.box {
  position: relative;
  /* 移动父元素高度的50% */
  top: 50%;
  /* 负数代表向上移动自身高度的50% */
  transform: translate(0, -50%);
  width: 200px;
  height: 200px;
  background-color: aqua;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="container">
  <div class="box">top, translate实现垂直居中</div>
</div>

1
2
3

// Make sure to add code blocks to your code group

注意

margin-top 的百分比是相对于包含块(父元素)的宽度

#水平居中垂直居中

上次更新: 2022/07/20, 08:37:03

← emmet语法 CSS书写顺序→