CSS居中之垂直居中（多种方法实现）

• table-cell+vertical-align

image.png

当有多个子div时，运用该方法效果如下

image.png

当子元素为inline-block元素时，效果如下

image.png

但是当子元素为高度不统一的inline-block元素时，效果如下

image.png

使用table方法主要是利用table的css特性

这个方法最适用于单个元素的居中，或者多个高度一致的元素的居中，当有多个高度不一致的元素效果可能就不是我们所预期的了。

tips:
元素浮动时，vertical-align会失效，另外float方法是处理不了不定高度的元素居中的
这种情况下如果想要三列元素都以自己为标准来垂直居中，使用flex方法

• flex+align-items

display: flex;
align-items: center;

这个方法基本解决了所有居中问题，也适用于行数不固定的文字垂直居中问题和高度不固定的多个元素或图片的居中问题

• absolute+transform

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

运用以上方法解决一下实际问题：

• 不定行数文字居中——使用flex

  
  
  

  image.png
  
  

  col无论有几行，表现都是居中的

• 大小不固定的图片居中——使用flex

• 如果父元素高度已定，最简洁的是对容器设置line-height

• 如果父元素高度不定，使用flex

• 单个图片可以使用table-cell方式

  
  
  

  image.png

.vertical-img img{
            vertical-align:middle;
            height: 100px;
        }
        .vertical-img span{
            vertical-align:middle;
            height: 100%;
            display: inline-block;
        }

        
        
    

• 绝对定位元素的居中——使用margin：auto

  
  
  

  image.png

.vertical-absolute{
            position:relative;
        }
        .vertical-absolute div{
            width: 100px;
            height: 100px;
            border:1px solid greenyellow;
            position:absolute;
            left:0;
            top:0;
            right: 0;
            bottom:0;
            margin: auto;
        }

    
absolute元素
 

• 绝对定位元素的居中——transform方法

.vertical-absolute-transform{
    position:relative;

}
.vertical-absolute-transform div{
    width: 100px;
    height: 100px;
    border:1px solid greenyellow;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

    
absolute元素

• 绝对定位的两个方法也是适用于单个元素居中。

总结以上居中方式的使用环境

• 单个元素垂直居中可以使用：table-cell、flex、absolute（margin和transform）

• 多个元素居中可以使用flex和table-cell

• 多个高度不固定元素（图片，多行文字行数不固定情况）居中可以使用flex