在开发中我们经常会遇到这个问题，就是让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。
居中是一个非常基础但又十分重要的场景，实现居中的方法存在很多，大概可以分为两大类：

  • 居中元素的宽高已知

  • 居中元素的宽高未知

    一、实现方式

    实现元素水平垂直居中的方式：

  • 利用定位 + margin: auto

  • 利用定位 + margin: 负值
  • 利用定位 + transform
  • table 布局
  • flex 布局

  • grid 布局

    1.利用定位+ margin: auto

    1. <style>
    2.   .father{
    3.       width:500px;
    4.       height:300px;
    5.       border:1px solid #0a3b98;
    6.       position: relative;
    7.   }
    8.   .son{
    9.       width:100px;
    10.       height:40px;
    11.       background: #f0a238;
    12.       position: absolute;
    13.       top:0;
    14.       left:0;
    15.       right:0;
    16.       bottom:0;
    17.       margin:auto;
    18.   }
    19. </style>
    20. <div class="father">
    21.   <div class="son"></div>
    22. </div>

    父级设置为相对定位，子级绝对定位，并且四个定位属性的值都设置为0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样高。
    这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin: auto进行自动偏移定位，它就可以上下左右都居中了。

    2.利用定位 + margin: 负值

    绝大数的情况下，设置父元素为相对定位，子元素移动自身50%实现水平垂直居中。

    1. <style>
    2.   .father {
    3.       position: relative;
    4.       width: 200px;
    5.       height: 200px;
    6.       background: skyblue;
    7.   }
    8.   .son {
    9.       position: absolute;
    10.       top: 50%;
    11.       left: 50%;
    12.       margin-left:-50px;
    13.       margin-top:-50px;
    14.       width: 100px;
    15.       height: 100px;
    16.       background: red;
    17.   }
    18. </style>
    19. <div class="father">
    20.   <div class="son"></div>
    21. </div>

    整个实现思路如下图：
    元素水平垂直居中的方法 - 图1

  • 初始位置为方块1的位置

  • 当设置left/top为 50%的时候，内部子元素为方块2的位置
  • 设置margin为负数时，使内部子元素到方块3的位置，即中间位置

这种方案不要父元素的宽高，即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置。但该方案需要知道子元素的宽高，我们现在也可以通过tansform属性进行移动。

3、利用定位+transform

  1. <style>
  2.     .father {
  3.         position: relative;
  4.         width: 200px;
  5.         height: 200px;
  6.         background: skyblue;
  7.     }
  8.     .son {
  9.         position: absolute;
  10.         top: 50%;
  11.         left: 50%;
  12.         transform: translate(-50%,-50%);
  13.         width: 100px;
  14.         height: 100px;
  15.         background: red;
  16.     }
  17. </style>
  18. <div class="father">
  19.     <div class="son"></div>
  20. </div>

transform: translate(-50%, -50%)会将元素位移至自己宽度和高度的-50%。
这种方法其实和上面的 margin负值的用法一样，可以说是margin负值的替代方案，并不需要知道自身元素的宽高。

4、table布局

设置父元素为display: table-cell，子元素设置为display: inline-block。利用vertical-align和text-align可以让所有的行内块级元素水平垂直居中。

  1. <style>
  2.     .father {
  3.         display: table-cell;
  4.         width: 200px;
  5.         height: 200px;
  6.         background: skyblue;
  7.         vertical-align: middle;
  8.         text-align: center;
  9.     }
  10.     .son {
  11.         display: inline-block;
  12.         width: 100px;
  13.         height: 100px;
  14.         background: red;
  15.     }
  16. </style>
  17. <div class="father">
  18.     <div class="son"></div>
  19. </div>

4、flex弹性布局

  1. <style>
  2.     .father {
  3.         display: flex;
  4.         justify-content: center;
  5.         align-items: center;
  6.         width: 200px;
  7.         height: 200px;
  8.         background: skyblue;
  9.     }
  10.     .son {
  11.         width: 100px;
  12.         height: 100px;
  13.         background: red;
  14.     }
  15. </style>
  16. <div class="father">
  17.     <div class="son"></div>
  18. </div>
  • display: flex时，表示该容器内部的元素将按照flex进行布局
  • align-items: center表示这些元素将相对于本容器垂直居中

  • justify-content: center 表示元素相对本容器水平居中

    5、grid网格布局

    1. <style>
    2.   .father {
    3.           display: grid;
    4.           align-items:center;
    5.           justify-content: center;
    6.           width: 200px;
    7.           height: 200px;
    8.           background: skyblue;
    10.       }
    11.       .son {
    12.           width: 10px;
    13.           height: 10px;
    14.           border: 1px solid red
    15.       }
    16. </style>
    17. <div class="father">
    18.   <div class="son"></div>
    19. </div>

    gird布局与flex布局用法一致。

    6、小结

    在上述方法中，不知道元素宽高大小仍能实现水平垂直居中的方法有：

  • 利用定位 + margin: auto

  • 利用定位 + transform
  • flex

  • grid

    总结

    根据元素标签的性质，可以分为：

  • 内联元素居中布局

  • 块级元素居中布局

    内联元素居中布局

    水平居中

  • 行内元素设置为： text-align: center

  • flex布局设置：display: flex; justify-content: center;

    垂直居中

  • 单行文本父元素确认高度： height === line-height

  • 多行文本父元素确认高度： display: table-cell; vertical-align: middle

    块级元素居中布局

    水平居中

  • 定宽：margin: 0 auto

  • 绝对定位 + left : 50% + margin: 负自身的一半

    垂直居中

  • pposition: absolute设置left、top、margin-left、margin-top(定高)

  • display: table-cell
  • transform: translate(x, y)
  • flex(不定高，不定宽)
  • grid(不定高，不定宽)，兼容性相对比较差