块级或行内元素垂直居中

一、让块级元素垂直居中

1.已知或未知元素宽高，利用flex布局，在需居中元素的父元素上设置display：flex; justify-content: center; align-items: center;

代码示例：

  
父元素display：flex; justify-content: center; align-items: center;

2.已知或未知元素宽高，在父元素上设置display: flex; 子元素上设置margin: auto

        已知或未知元素宽高，在父元素上设置display: flex; 子元素上设置margin: auto

3. 已知或未知元素宽高，绝对定位+css3的transform(transform中translate偏移的百分比都是相对于自身而言的,所以在子元素宽高未知的情况下仍然适用)

      

        绝对定位+css3的transform(transform中translate偏移的百分比都是相对于自身而言的,所以在子元素宽高未知的情况下仍然适用)
      

4. 已知宽高，利用position定位，在父元素上设置相对定位，子元素上设置绝对定位，且上、下、左、右的位移均设置为0，margin设置为auto

代码示例：

 .father-box {
  width: 300px;
  height: 400px;
  background: cadetblue;
  position: relative;
  .child-box {
    width: 100px;
    height: 100px;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
}

5. 已知宽高，利用父元素相对定位，子元素绝对定位，top：50%，left： 50%，margin-top:负的子元素高度除以2，margin-left: 负的子元素宽度除以2

代码示例：

二、行内元素垂直居中

1. 让块级元素中的行内元素垂直居中，在块级元素上设置：

text-align: center;
line-height: 300px;  //值为父盒子对应的高度

2. vertical-align设置行内元素的基线相对于该元素所在行的基线的垂直对齐

vertical-align: middle