CSS学习：居中

发表于   |   分类于

常用居中方法：水平居中，垂直居中

居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中：

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

以下 div 的显示效果皆加入了 padding: 1em; 和边框 border: 3px; 和文章所写样式有些许不同，只是为了做视觉显示样式所加。

水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：

  1. 行内元素：对父元素设置 text-align: center;
  2. 定宽块状元素: 设置左右 margin 值为 auto;
  3. 不定宽块状元素: 设置子元素为 display: inline,然后在父元素上设置 text-align: center;
  4. 通用方案: flex 布局，对父元素设置 display: flex; justify-content: center;

1. 行内元素

1
2
3
.parent1 {
  text-align: center;
}
class = “parent1”
class = “child”父元素设置了 text-align：center 子元素行内元素内容居中

2. 定宽块状元素

1
2
3
4
.child2 {
  width: 200px;
  margin: 0 auto;
}
class = “parent”
class = “child2”定宽块状元素设置左右 margin 为 auto 实现居中

3. 不定宽块状元素

1
2
3
4
5
6
.parent3 {
  text-align: center;
}
.child3 {
  display: inline;
}
class = “parent3”
class = “child3”不定宽块状元素

4. 通用方案: flex 布局

1
2
3
4
.parent4 {
  display: flex;
  justify-content: center;
}
class = “parent4”
class = “child”通用方案: flex 布局

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

  1. 父元素一定，子元素为单行内联文本：设置父元素的 height 等于行高 line-height
  2. 父元素一定，子元素为多行内联文本：设置父元素的 display: table-cell，再设置 vertical-align: middle;
  3. 块状元素:设置子元素 position: fixed 或 absolute、top、right、bottom、left 的属性然后设置 margin: auto 0;
  4. 通用方案: flex 布局，给父元素设置 {display: flex; align-items: center;}

1. 父元素一定，子元素为单行内联文本

1
2
3
4
.parent5 {
  height: 234px;
  line-height: 200px;
}

为了显示出效果样式，parent 元素设置了 padding: 1em; 即 14px，外加上边框 3px 上下即为 6px，所以高度 height 外加上了 34px 以达到显示效果。

class = “parent5”
class = “child”单行内联文本

2. 父元素一定，子元素为多行内联文本

1
2
3
4
5
.parent6 {
  height: 500px;
  display: table-cell;
  vertical-align: middle;
}
class = “parent6”
class = “child”多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本多行内联文本

3. 块状元素

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent7 {
  height: 500px;
}
.child7 {
  width: 200px;
  height: 200px;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin: auto 0;
}
class = “parent7”
class = “child7”块状元素

4. 通用方案: flex 布局

1
2
3
4
5
6
7
8
9
.parent8 {
  height: 500px;
  display: flex;
  align-items: center;
}
.child8 {
  width: 200px;
  height: 200px;
}
class = “parent8”
class = “child8”通用方案: flex 布局