8种方法解决垂直居中

  <div>
    <span></span>
  </div>

设置上下padding

  div {
    padding-top: 50px;
    padding-bottom: 50px
  }

给父元素设置上下padding相等就能使子元素垂直居中，缺点是父元素不能有固定高度

line-height

  span {
    line-height: 与div高度相等;
  }

行距 = line-height - font-size，缺点是要有足够宽度容纳同一行,不能设置多行内容

flex

  div {
    display: flex;
    align-items: center;
  }

语法简易好理解，兼容性是个问题

display:table

  div {
    display: table;
  }

  span {
    display: table-cell;
    vertical-align: middle;
  }

简单，有副作用

display:grid

  div {
    display: grid;
    align-items: center;
  }

布局很牛，兼容性问题难度高

display:inline-block

  <div class="main">
    <div class="search">
      <form action="">
        <input type="text" placeholder="找找看">
        <span class="button">search</span>
      </form>
    </div>
  </div>

  div.search {
    display: inline-block;
  }

  div.main::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

伪元素添加空元素，兼容性好，不好理解

绝对定位

  div {
    position: relative;
  }

  span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

父相子绝，容易上手，缺点是脱离文档流

margin

  div{
    position: relative;
  }

  span {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

大家加油 😃 更多看👇源码地址