1、绝对定位居中（子元素需设置宽高）

• > 原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。

内容块的父容器：

position:relative;

子元素： （必须设置高度）

position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin:auto;

2、绝对定位配合margin（子元素需设置宽高）

• > 原理：top：50%元素上边界位于包含框中点，设置负外边界使得元素垂直中心与包含框中心重合；

第一种

第二种

3、table-cell方式（子元素不需设置宽高）

• > 原理：利用表格布局的特点，vertical-align设置为middle;单元格中的内容与所在行中间对齐

父容器：（设置宽高）

display:table-cell;text-align:center;vertical-align:middle;

子元素：

display:inline-block;vertical-align:middle;

 

     
    
      
       11111111111
      
     

 

 

4、通过添加空span标签使图片居中（子元素需设置宽高）

父容器：

text-align: center;

<span>：

display: inline-block;  //将行内元素改变为行内块元素显示width: //1px; 实现ＩＥ下可读效果height: 100%; //使用元素高度和图片容器高度一样vertical-align: middle; //垂直对齐

图片：

vertical-align: middle;

 

 

 

5、外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%; left: 50%;。

（子元素需设置宽高）

 

 

6、内容定义transform:translate(-50%,-50%),并且加上top：50%；left：50%。（子元素需设置宽高）

 

 

7、增加额外子元素设置margin-bottom为内容元素的高度+padding的一半。（不能实现水平垂直居中，仅垂直居中）

• > 原理与2方法类似，floater的下边界是包含框的中心线，负下外边界保证center的中心线与包含框中心线重合

 

 

8、inline-block方式（子元素不需设置宽高）

• > 原理：为同一行的inline-block元素设置vertical-align：middle，该行内的inline-block元素会按照元素的垂直中心线对齐。

     
    
      
       11111111111111111111
      
     

 

 

9、弹性盒式布局（子元素不需设置宽高）

第一种

     
    
      
       111111111111
      
     

第二种

     
    
      
       111111111111