总结垂直居中各方法优缺点和使用场景

Posted 2020-08-23

一、容器内

　　　　

 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 }  

二、负外边距

.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有关，计算需要根据不同情况。

 

 

三、变形

.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.      某些情形下会出现文本或元素边界渲染模糊的现象

 

 

四、表格单元格

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

优点：

1.      高度可变

2.      内容溢出会将父元素撑开。

3.      跨浏览器兼容性好。

缺点：

需要额外html标记

 

 

五、行内块元素

.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。

 

 

六、flex布局

　　

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

优点：

1.      高度宽度可变

缺点：

1.需要一个容器

2.ie7/8 不兼容