css居中超详细实现方法

1、flex布局-设置居中

常见的一种方式就是使用 flex布局设置居中。

利用弹性布局(flex)，实现水平居中，其中 justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

给容器设置：

  • display: flex 写在父元素上这就是定义了一个伸缩容器

  • justify-content 主轴对齐方式，默认是横轴

  • align-items 纵轴对齐方式，默认是纵轴

优点： 简单、方便、快速，三行代码搞定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
  align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
  justify-content: center; //纵轴对齐方式，默认是纵轴
}
.child {
  background: red;
}  
</style>

2、flex-给子项设置

第一种方式是给父盒子设置属性，这一种是给子盒子设置 margin: auto实现居中。给容器设置 display: flex;
子项设置 margin: auto;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
}
.child {
  background: red;
  margin: auto; // 水平垂直居中
}  
</style>

3、绝对定位

使用绝对定位的方式实现水平垂直居中。容器设置 position: relative。
子元素设置 position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);

优点就是不用关心子元素的长和宽，但是这种方法兼容性依赖 translate2d 的兼容性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: red;
}  
</style>

4、table-cell 实现垂直居中

css 新增的 table 属性，可以让我们把普通元素，变为 table 元素的现实效果，通过这个特性也可以实现水平垂直居中

而且 table 单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

使用 table-cell 实现垂直居中,容器设置 display: table-cell;

vertical-align: middle属性设置元素的垂直对齐方式

子元素如果是块级元素，直接使用左右 margin:auto 实现水平居中。如果是行内元素，给容器设置 text-align: center

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素 inline, 内联块 inline-block,
内联表 inline-table, inline-flex元素水平居中都有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;  // 设置元素在垂直方向上的对齐方式
  text-align: center;
}
.child {
  background: red;
  display: inline-block;
}  
</style>