垂直居中的实现方式

基本设置

  <div id="outer">
    <div id="inner">
      测试div
    </div>
  </div>

绝对定位和负外边距对块级元素进行垂直居中

  #outer {
    width: 200px;
    height: 300px;
    background: skyblue;

    position: relative;
  }
  #inner {
    width: 150px;
    height: 50px;
    background: palevioletred;

    position: absolute;
    top: 50%;
    margin-top: -25px;
    line-height: 50px;
  }

绝对定位和transform

  #outer {
    width: 200px;
    height: 300px;
    background: skyblue;

    position: relative;
  }
  #inner {
    width: 150px;
    height: 50px;
    background: palevioletred;

    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }

绝对定位结合margin: auto

  #outer {
    width: 200px;
    height: 300px;
    background: skyblue;

    position: relative;
  }
  #inner {
    width: 150px;
    height: 50px;
    background: palevioletred;

    position: absolute;
    /* top与bottom要有相同的值 */
    top: 0;
    bottom: 0;
    margin: auto;
  }

父元素设置padding

  #outer {
    width: 200px;
    background: skyblue;

    padding: 100px 0;
  }
  #inner {
    width: 150px;
    height: 50px;
    background: palevioletred;
  }

flex布局

  #outer {
    width: 200px;
    height: 300px;
    background: skyblue;

    display: flex;
    /* 设定在垂直方向的对齐方式 */
    align-items: center;
  }
  #inner {
    width: 150px;
    height: 50px;
    background: palevioletred;
  }

  #outer {
    width: 200px;
    height: 300px;
    background: skyblue;

    display: flex;
    /* 默认的主轴为水平方向 */
    /* 更改默认主轴, 并修改主轴的对齐方式 */
    flex-direction: column;
    justify-content: center;
  }
  #inner {
    width: 150px;
    height: 50px;
    background: palevioletred;
  }

line-height和vertical-align图片垂直居中

  <div id="outer">
    <img src="./test.jpg" alt="">
  </div>

  #outer {
    width: 200px;
    height: 300px;
    background: skyblue;

    line-height: 300px;
  }
  #outer img {
    width: 100px;
    height: 150px;

    vertical-align: middle;
  }