总结一下几种垂直居中的方式-一一网

这是我参与更文挑战的第29天，活动详情查看：更文挑战

前言

在面试中如果面试官需要考察css，可能会提问：

你能讲讲垂直居中有哪几种实现方式？

水平居中我们是知道的，如果盒子要在大盒子里面居中，使用margin: auto就可以，如果盒子里的文本要在盒子居中，使用text-align: center就能实现，但是垂直居中的实现方法是比水平居中的方法多的，今天咱们来看看垂直居中的几种实现方式。

line-height

针对单行文本，我们要实现垂直居中，最方便的是使用line-height。利用line-height等于父元素的高度实现，或者父元素无需设置高度，子元素设置line-height就行。

切记：line-height只支持单行文本

实现的例子：

  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      text-align: center;
      color: #fff;
      line-height: 200px;
    }
  </style>
  <div class="father">
    <div class="son">我是单行文本</div>
  </div>
复制代码

table-cell + vertical-align

设置父元素为display:table，子元素设置display:table-cell 和 vertical-align:center实现垂直居中；

  <style>
    .father {
      display: table;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      display: table-cell;
      text-align: center;
      color: #fff;
      vertical-align: middle;
    }
  </style>
  <div class="father">
    <span class="son">我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本</span>
  </div>
复制代码

margin: auto

可能大家会有疑惑，marign: auto不是实现水平居中的吗？为什么也可以实现垂直居中？

其实这里不只是单单使用marign: auto,还得结合绝对定位absolute（当然你用fixed也行）
top,bottom,left, right都得设置0；

这种方式需要子元素设置个高度，不然没有效果；

通过例子来看看

  <style>
    .father {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      height: 100px;
      background-color: red;
    }
  </style>
  <div class="father">
    <span class="son"></span>
  </div>
复制代码

absolute定位+ margin

这里父元素使用relative相对定位，子元素使用absolute绝对定位，然后需要注意这里需要子元素定宽高，然后使用top: 50%和left:50%相对的是父元素，这时候子元素不是正中心，是偏向右下角，因为子元素移动是以左上角那个点为坐标的，最后使用margin-top：自己高度的一半和margin-left：自己宽度的一半，把自己移到正中心。

下面来看看例子：

  <style>
    .father {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      position: absolute;
      height: 100px;
      width: 100px;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
      background-color: red;
    }
  </style>
  <div class="father">
    <span class="son"></span>
  </div>
复制代码

absolute定位 + transform

这个跟absolute定位+ margin思路有点类似：

也是使用父元素使用relative相对定位，子元素使用absolute绝对定位，使用top: 50%和left:50%相对的是父元素，这时候子元素不是正中心，是偏向右下角，因为子元素移动是以左上角那个点为坐标的，但是此时子元素的移动到正中心是使用transform: translate(-50%, -50%),因为此时translate(-50%, -50%)，相对的是自己的宽度和高度。

这种方式子元素可以是不定宽高，灵活性好。

下面来看看例子：

  <style>
    .father {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: red;
      color: #fff;
    }
  </style>
  <div class="father">
    <span class="son">我是多行文本多行文本我是多行文本多行文本我是多行文本多行文本</span>
  </div>
复制代码

flex布局

最后讲讲flex布局，这个是弹性布局，css3新增的布局，可以通过1个属性align-items:center就可以实现垂直居中。

在项目中使用很方便，不用写过多冗余代码，目前除了ie低版本都能兼容；

这种方式子元素可以是不定宽高。

下面来看看例子：

  <style>
    .father {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      background-color: red;
      color: #fff;
    }
  </style>
  <div class="father">
    <span class="son">我是多行文本多行文本我是多行文本多行文本我是多行文本多行文本</span>
  </div>
复制代码