CSS常用居中方法

tech

拼多多一道笔试题是关于水平居中的，以前看过人家写的各种方法，笔试时候就写了俩…
前阵子写的网易云音乐APP也需要用到居中的方法，
今天打算把常用的居中方法总结一下，省的我又忘了..

1.水平居中

1.1 行内元素

对其父元素添加样式

1
text-align: center;
1.2 块级元素

对其本身添加样式

1
margin: 0 auto;

它们起作用的首要条件是子元素必须没有被float影响

1.3 多个块级元素

  • inline-block：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .parent {
      ...
      text-align: center;
    }
    .parent .item {
      ...
      display: inline-block;
      text-align: left;
    }

    inline-block会产生元素间空白间隙问题 。 解决方案

  • flex

    1
    2
    3
    4
    5
    .parent {
      ...
      display: flex;
      justify-content: center;
    }

2.垂直居中

2.1 行内元素(单行)

使子元素的line-height与父元素的height相等即可

1
2
3
4
5
6
7
8
.parent {
  ...
  height: 300px;
}
.parent .item {
  ...
  line-height: 300px;
}
2.2 行内元素(多行)

像<span><div>a</div><div>b</div><div>c</div></span>这种多行的行内元素 上述方法失效
解决方法：

  • table-cell

    1
    2
    3
    4
    5
    .parent {
      ...
      display: tabel-cell;
      vertical-align: middle;
    }

    这种方法会影响到父元素的宽度，实际应用中不推荐

  • flex

    1
    2
    3
    4
    5
    6
    .parent {
      ...
      height: 300px;
      display: flex;
      align-items: center;
    }

    父元素一定要设置高度!

2.3 块级元素(高度未知)

  • table-cell
    同2.2

  • flex

    1
    2
    3
    4
    5
    6
    7
    .parent {
      ...
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    父元素同样需要设置高度

  • translate

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .parent {
      ...
      position: relative;
    }
    .parent .item {
      ...
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    该方法同时适用于2.1，2.2，但不适用多个块级或行内元素，会发生重叠

2.4 块级元素(高度已知)
1
2
3
4
5
6
7
8
9
10
11
.parent {
  ...
  position: relative;
}
.parent .item {
  ...
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

除此之外，2.3中方法在这里也适用。

3.垂直水平居中

垂直水平其实就是以上方法的综合，总结有以下几种

  • flex
    万能….
    1
    2
    3
    4
    5
    6
    .parent {
      ...
      display: flex;
      justify-content: center;
      align-items: center;
    }
  • translate
    适用大小未知的元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .parent {
      ...
      position: relative;
    }
    .parent .item {
      ...
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    }
  • 负margin
    适用大小已知的元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .parent {
      ...
      position: relative;
    }
    .parent .item {
      ...
      position: absolute;
      top: 50%;
      left: 50%
      height: 100px;
      width: 100px;
      margin-top: -50px;
      margin-left: -50px;
    }
  • margin:auto
    适用于大小已知的元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .parent {
      ...
      position: relative;
    }
    .parent .item {
      ...
      position: absolute;
      width: 100px;
      height: 100px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  • tabel-cell
    不好用
    1
    2
    3
    4
    5
    6
    .parent {
      ...
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

最后

CSS发展这么多年，居中的方法层出不穷，从原始的margin或修改display，到CSS3诞生了flex和transform，常用的我想应该总结的差不多了。
在查阅资料的时候，还看到了很多神奇的套路比如伪元素，-webkit-box等等，考虑到这些太复杂，以及兼容性问题，我大致了解了一下但没写进来。
最后我想说的是，flex真好用。