總結垂直居中各方法優缺點和使用場景

1、容器內

　　　　

 1 .Center-Container {  
 2   position: relative;  
 3 }  
 4   
 5 .Absolute-Center {  
 6   width: 50%;  
 7   height: 50%;  
 8   overflow: auto;  
 9   margin: auto;  
10   position: absolute;  
11   top: 0; left: 0; bottom: 0; right: 0;  
12 }  

2、負外邊距

.is-Negative {  
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}  

優勢：

1.      良好的跨瀏覽器特性，兼容IE6-IE7。

2.      代碼量少。

缺點：

1.      不能自適應。不支持百分比尺寸和min-/max-屬性設置。

2.      內容可能溢出容器。

3.      邊距大小與padding,和是否認義box-sizing: border-box有關，計算須要根據不一樣狀況。

 

 

3、變形

.is-Transformed {   
  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}  

優勢：

1.      內容可變高度

2.      代碼量少

缺點：

1.      IE8不支持

2.      屬性須要寫瀏覽器廠商前綴

3.      可能干擾其餘transform效果

4.      某些情形下會出現文本或元素邊界渲染模糊的現象

 

 

4、表格單元格

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

優勢：

1.      高度可變

2.      內容溢出會將父元素撐開。

3.      跨瀏覽器兼容性好。

缺點：

須要額外html標記

 

 

5、行內塊元素

.Center-Container.is-Inline {   
  text-align: center;  
  overflow: auto;  
}  
  
.Center-Container.is-Inline:after,  
.is-Inline .Center-Block {  
  display: inline-block;  
  vertical-align: middle;  
}  
  
.Center-Container.is-Inline:after {  
  content: '';  
  height: 100%;  
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
}  
  
.is-Inline .Center-Block {  
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */   
}  

優勢：

1.      高度可變

2.      內容溢出會將父元素撐開。

3.      支持跨瀏覽器，也適應於IE7。

缺點：

1.須要一個容器

2.水平居中依賴於margin-left: -0.25em;該尺寸對於不一樣的字體/字號須要調整。

3.內容塊寬度不能超過容器的100% - 0.25em。

 

 

6、flex佈局

　　

.center-container{
        display:flex;
        justify-content:center;
        align-item:center
}
.center-content{
        width:50%;
        height:50%
}

優勢：

1.      高度寬度可變

缺點：

1.須要一個容器

2.ie7/8 不兼容