CSS布局-垂直置中問題

標籤：其他   ems   bsp   垂直置中   items   支援   置中   如何   css3   

在前端頁面的布局方面，很多時候需要用到垂直置中，如果父集元素或子項目的高度是固定的那麼垂直置中可以用line-height或者定位 top：50%；margin-top：- height/2 px；實現，那麼如果父元素的高度和子項目的高度都不是固定值呢？

下面就總結一下使用css進行垂直置中布局的方法及使用環境。

html 使用如下：

<div class="parent">

  <div class="child"> </div>

</div>

 

1.父元素高度與子項目高度差值為固定值，對父元素使用padding使子項目置中

當父元素與子項目差值為固定值 H px 時，可以對父元素使用上下邊的padding:H/2 px;  把子項目置中。

 

.parent{  width:200px;  height:auto;  padding:50px 0;  background-color: #13B202;}.child{  width: 40px;height: 40px;  margin:0 auto;  background-color: #000;}

 

效果如下：

 

 

2. 父集高度為固定值，父集使用 line-height ，子集使用 display:inline-box ; 

對父元素使用line-height：父集的高度；

由於line-height只對行元素有效果，所以改變子項目的display屬性為inline-block，這樣，行元素即可以有行元素屬性，又能夠像塊元素一樣設定寬高。

最後對子項目設定vertical-align: middle; 使其在行高內垂直置中，這樣置中布局就實現了。

 

.parent{  width: 200px;  height: 200px;  text-align: center;  line-height: 200px;  background-color: #13B202;}.child{  display: inline-block;  width: 40px;height: 40px;  vertical-align: middle;  background-color: #000;}

效果如下：

 3.子項目高度固定，如果需要橫向置中，子項目寬度也需固定，對子集使用定位 使其置中。

當子項目 的高度固定，無論父元素高度如何變化，子項目都可以通過 top:50%; margin-top: - 子項目高度/2 px ;使其垂直置中，這種一般用於父集高度不固定，會隨著螢幕高度或者其他因素變化的情況使用，例如彈窗的垂直置中。對於水平方向的置中也一樣，使用left：50%；margin-left：-子項目寬度/2 px ；

.parent{  position: relative;  width: 100%;  height: 100%;  background-color: #13B202;}.child{  position: absolute;  left: 50%;  top: 50%;  width: 40px;  height: 40px;  margin-left: -20px;  margin-top: -20px;  background-color: #000;}

效果如下：

 

4. 父元素高度不固定，子項目高度也不固定 。

這種情況下上面列出的都不能使用，當遇到這種情況時確實很讓人頭疼，不知如何是好，那麼使用css3的 box-align 和 box-pack 進行水平置中，使用align-items進行垂直置中。

這種情況下，無論父元素和子項目寬高如何變化，子項目都能夠保持水平和垂直置中顯示。唯一不足之處就是對於不支援CSS3的瀏覽器不能使用。

.parent{    width: 200px;    height: 200px;    background-color: #13B202;    display: flex;    display: -webkit-flex;    -webkit-box-pack: center;    justify-content: center;    -webkit-box-align: center;    -ms-flex-align: center;    -webkit-align-items: center;    align-items: center;}.child{    width: 40px;    height: 40px;    background-color: #000;}

 

 效果如下：

 

CSS布局-垂直置中問題