垂直居中大法

出門面試吧必考題目垂直居中百試不厭，不要問我爲何就是這麼重要就是這麼強勢，你覺得你會了嗎其實咱們都只是略知皮毛真正在項目裏你會很頭疼，話很少說咱們

開始今天的表演。

1.CSS樣式與HTML中標籤屬性的區別：

　　標籤的屬性是採用 屬性名=「屬性值」 表示的

　　CSS樣式是採用名值對 屬性名：屬性值； 表示的

2.內聯元素（行內元素）與塊元素

　　（1）內聯元素及其特色：

　　　  所謂的行內元素，指的是隻佔自身大小，不會獨佔一行
          常見的內聯元素：
　　　  a img iframe span
           span沒有任何語義，span標籤專門用來選中文字，並對該文字設置樣式

　　　　對內聯元素設置寬高是無效的，也不能夠設置行高，其寬度和高度都默認被元素撐開

　　　　將內聯元素放在 li 標籤中能夠設置其寬高

　　　　能夠對內聯元素設置內邊距，IE6以上瀏覽器支持

　　　　能夠對內聯元素設置外邊距，但只對左右外邊距起做用

　　 （2）塊元素：

　　　　所謂的塊元素是會獨佔一行的元素,不管他的內容多少都會獨佔一行
           p h1 h2 h3...都是塊元素
           div標籤沒有任何語義，就是一個純粹的塊元素，並不會對其裏面的元素設置任何樣式

　　　　能夠對塊元素設置高度和邊距

　　　　若是不本身設置寬度，其寬度爲其父元素寬度

　　　　塊元素中能夠容納塊元素和內聯元素，但內聯元素中不能包含塊元素

3.幾種居中方式

　　（1）設置塊元素中文字水平居中

　　　　使用text-align 樣式設置塊中文本或圖片居中。

　　　　該樣式只能操做塊元素或者被CSS 顯示成塊元素的內聯元素

　　　　對一個塊元素設置該樣式後，其子塊元素中的文本或者圖片也會相對於其子塊元素居中

　　（2）塊元素自身水平居中

　　　　經過設置 magin：0 auto； 使該塊元素在其父元素中水平居中顯示

　　（3）內聯元素的垂直居中

　　　　經過設置 vertical-algin 樣式

　　　　該屬性適用於：

　　　　　　內聯元素（被轉換成內聯元素的塊元素）

　　　　　　display 設置爲 table-cell 的元素

　　　　　　在 table 也就是表格中的元素

　　（4）設置塊元素中文字垂直居中

　　　　　　經過設置塊元素的內邊距

　　（5）塊元素自身垂直居中

　　　　　　能夠經過設置外邊距實現

　　　　　　經過絕對定位設置其距離父元素的 left right top bottom 來實現

      

這裏直接上代碼簡單粗暴沒毛病,垂直居中設置：

• 1.使用position:absolute（fixed）,設置left、top、margin-left、margin-top的屬性;

  .box{ position:absolute;/*或fixed*/ top:50%; left:50%; margin-top:-100px; margin-left:-200px; }

  • 2.利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;

.box{
    position: absolute;或fixed
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

• 3.利用display:table-cell屬性使內容垂直居中,這個方法在多行文字居中的時候用的比較多;

HTML代碼：

<div class="box"> <span>多行文字，此處居中設置</span> </div>

CSS代碼：

.box{ display:table-cell; vertical-align:middle; text-align:center; width:100px; height:120px; background:purple; } .box span{ display: inline-block; vertical-align: middle; }

• 4.使用css3的新屬性transform:translate(x,y)屬性;

.box{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); }

• 5.最高大上的一種，使用before，after僞元素;

HTML代碼：

<div class='box'> <div class='content'> 垂直居中 </div> </div>

CSS代碼：

.box{ position:fixed; display:block; background:rgba(0,0,0,.5); } .box:before{ content:''; display:inline-block; vertical-align:middle; height:100%; } .box:after{ content:''; display:inline-block; vertical-align:middle; height:100%; } .box .content{ width:60px; height:60px; line-height:60px; color:red; }

• 6.Flex佈局;

.box{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    水平居中
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
     垂直居中
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-align:center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}