css元素垂直居中的8中方法

一、

經過vertical-align:middle實現CSS垂直居中

經過vertical-align:middle實現CSS垂直居中是最常使用的方法，可是有一點須要格外注意，vertical生效的前提是元素的display：inline-block。

　.wrap1{ line-height: 100px;}
 .item{
      width: 40px;
      height: 20px;
      background: yellowgreen;
  }

　　.verticle_align{
    　　display: inline-block;
   　　 vertical-align: middle;
　　}

 

    <div class="wrap wrap1">
        <div class="item verticle_align"></div>
    </div>

 

二、經過display:flex實現CSS垂直居中。q
 隨着愈來愈多瀏覽器兼容CSS中的flexbox特性，因此如今經過「display:flex」實現CSS水平居中的方案也愈來愈受青睞。 經過display:flex實現CSS垂直居中的方法是給
 父元素display:flex;而子元素align-self:center; 這個跟CSS水平居中的原理是同樣的，只是在flex-direction上有所差異，一個是row(默認值)，另一個是column。

.wrap2{
            display: flex;
        }
        .flex{
            align-self: center;
        }

 <div class="wrap wrap2">
        <div class="item flex"></div>
    </div>

　　

三、經過僞元素:before實現CSS垂直居中。
具體方式是爲父元素添加僞元素:before，使得子元素實現垂直居中。
　　跟1出現的問題同樣，居中的有問題

.wrap3:before{
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
        .fu_before{
            display: inline-block;
        }

<div class="wrap wrap3">
        <div class="item fu_before"></div>
    </div>

　　

四、經過display:table-cell實現CSS垂直居中。
 給父元素display:table，子元素display：table-cell的方式實現CSS垂直居中。
　　至關於把元素屬性轉變爲表格屬性
　　子元素會在父元素中充滿，此種方法有問題

.wrap4{
            display: table;
        }
        .table-cell{
            width: 50px!important;
            height: 50px!important;
            display: table-cell;
            vert-align: middle;
        }

<div class="wrap wrap4">
        <div class="item table-cell"></div>
    </div>

　　

五、經過隱藏節點實現CSS垂直居中。
建立一個隱藏節點#hide，使得隱藏節點的height值爲剩餘高度的一半便可。 這種方法也適用於CSS水平居中，原理同樣。

基本不可取；增長多餘元素，並且元素若是高度不固定這個方法就不合適

.hide{
            width: 100%;
            height: 40px;
        }

<div class="wrap wrap5">
        <div class="hide"></div>
        <div class="item hide-ele"></div>
    </div>

　　

六、已知父元素高度經過transform實現CSS垂直居中。
 給子元素的position:relative，再經過translateY便可定位到垂直居中的位置。

這種方式多數可用於移動端，css3屬性，電腦端頁面可能兼容不是很好

.transform-relative{
            position:relative;
            top:50%;
            transform:translateY(-50%);
        }

<div class="wrap wrap6">
        <div class="item transform-relative"></div>
    </div>

　　

七、未知父元素高度經過transform實現CSS垂直居中。 先給父元素position:relative，再給子元素position:absolute，經過translateY便可定位到垂直居中的位置。

　　相似方法6

.wrap7{
            position: relative;
        }
        .transform-absolute{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

<div class="wrap wrap7">
        <div class="item transform-absolute"></div>
    </div>

　　

八、經過line-height實現CSS垂直居中。 設置子元素的line-height值等於父元素的height，這種方法適用於子元素爲單行文本的狀況

　　只適合單行文本

 .wrap8{
            line-height: 100px;
        }
        .line-height{
            display: inline-block;
        }

<div class="wrap wrap8">
        <div class="item line-height"></div>
    </div>