CSS垂直居中

時間 2019-11-13 標籤 css 垂直居中

1.文本的水平垂直居中css

line-height + text-align:centerhtml

1 <div class='wrap'>  
2   水平垂直居中水平垂直居中
3 </div>

 1 html,body{  
 2   margin: 0;
 3 }
 4 .wrap{
 5   line-height: 400px;
 6   text-align:center;
 7 
 8   height: 400px;
 9   font-size: 36px;
10   background-color: #ccc;
11 }

2.利用盒模型的水平垂直居中css3

咱們通常講的盒模型都是說的塊級盒的盒模型，也只有塊級盒的盒模型用得多一點，塊級盒block-level box又是分別由content-box、padding-box、border-box、margin-box組成的，以下圖：web

用css3的calc()動態計算:瀏覽器

1 <div class="wrap">  
2   <div class="content"></div>
3 </div>

 1 .wrap{
 2   margin-top: 20px;
 3   margin-left: auto;
 4   margin-right: auto;
 5   width: 400px;
 6   height: 400px;
 7   background-color: #ccc;
 8   .content{
 9     padding: -webkit-calc(~"(100% - 100px) / 2");
10     padding: calc(~"(100% - 100px) / 2");
11     width: 100px;
12     height: 100px;
13     background-color: #333;
14     background-clip: content-box;
15   }
16 }

注意這裏我在calc中使用了一個~""的寫法，這是less中的一個語法，告訴less這裏不被less所編譯，要是被less編譯了的話，css的calc函數的參數就不是100% - 100px，而是0%了。less

3.使用絕對定位居中函數

1 <div class="container">
2     <div class="center absolute_center">絕對對位原理：元素在過分受限狀況下，將margin設置爲auto，瀏覽器會重算margin的值，<br />過分受限指的是同時設置top/bottom與height或者left/right與width。
3     </div>
4 </div>

絕對對位原理：元素在過分受限狀況下，將margin設置爲auto，瀏覽器會重算margin的值，過分受限指的是同時設置top/bottom與height或者left/right與width。佈局

1 .absolute_center{
 position:absolute;
 width:200px; 
 height:200px;
 top:0;
 bottom:0;
 left:0; 
right:0; 
margin:auto; 
background:#518fca; 
overflow:auto; 
resize:both;/*用於設置了全部除overflow爲visible的元素*/
}

使用絕對定位要求元素必須設置明確高度。內容超過元素高度時須要設置overflow決定滾動條的出現flex

優勢：支持響應式，只有這種方法在resize以後仍然垂直居中flexbox

缺點：沒有顯式設置overflow時，內容超過元素高度時會溢出，沒有滾動條

4.負marginTop方式

已知元素高度後，使用絕對定位將top設置爲50%，mergin-top設置爲內容高度的一半(height + padding) / 2；內容超過元素高度時須要設置overflow決定滾動條的出現

原理：top：50%元素上邊界位於包含框中點，設置負外邊界使得元素垂直中心與包含框中心重合；

1 .negative_margin_top{ 
 width:200px; 
 height:200px; 
 position:absolute;
 top:50%;
 left:0;
 right:0;
 margin:auto;
 margin-top:-100px; /*-(height+padding)/2*/ }

優勢：代碼量少、瀏覽器兼容性高支持ie6 ie7

缺點：不支持響應式(不能使用百分比、min/max-width)

5.藉助額外元素floater

元素高度已知，在center元素外插入一個額外元素floater，設置floater的height爲50%；margin-bottom爲center元素高度的一半(height + padding) / 2。內容超過元素高度時須要設置overflow決定滾動條的出現。

原理與2方法相似，floater的下邊界是包含框的中心線，負下外邊界保證center的中心線與包含框中心線重合。

1 <div class="container">
2     <div class="floater"></div>
3     <div class="center floater_center">元素高度已知，在center元素外插入一個額外元素floater，設置floater的height爲50%；<br />margin-bottom爲center元素高度的一半(height + padding) / 2。內容超過元素高度時須要設置overflow決定滾動條的出現。</div>
4 </div>

1 .floater{ 
 height:50%;
 margin-bottom:-100px;
}
2 .floater_center{
height:200px;
width:200px;
margin:auto;
}

優勢：瀏覽器兼容性好，兼容舊版本IE

缺點：須要額外元素，不支持響應式(不能使用百分比、min/max-width)

6.table-cell方式

將center元素的包含框display設置爲table，center元素的display設置爲table-cell，vertical-align設置爲middle。

原理：利用表佈局特色，vertical-align設置爲middle後，單元格中內容中間與所在行中間對齊

1 .container2{
display:table; 
height:100%;
}
2 .table_cell{
/*將cell垂直居中，若是外層div不爲table則tablecell必須有高度*/
display:table-cell;
vertical-align:middle;
}

優勢：支持任意內容的可變高度、支持響應式

缺點：每個須要垂直居中的元素都會須要加上額外標籤（須要table、table-cell兩個額外元素）

7.inline-block方式

將center元素display設置爲inline-block，vertical-align設置爲middle，爲包含框設置after僞元素，將僞元素display設置爲inline-block,vercial-align設置爲middle，同時設置height爲100%，撐開容器。

原理：爲同一行的inline-block元素設置vertical-align：middle，該行內的inline-block元素會按照元素的垂直中心線對齊。

<div class="container">
    <div class="center inline_block">生命裏有着多少的無奈和可惜,又有着怎樣的愁苦和感傷?<br> 雨浸風蝕的落寞與蒼楚必定是水,靜靜地流過青春奮鬥的日子和觸摸理想的歲月。
    </div>
</div>

1 .container{display:block;}
2 /*inline-block的前世此生*/
3 .container:after{content: '';
 display: inline-block;
vertical-align: middle;
height: 100%;
}
4 .inline_block{
display:inline-block;
vertical-align:middle;
}

優勢：支持響應式、支持可變高度

缺點：會加上額外標記

6.line-height方式

該方式只適用於狀況比較簡單的單行文本，將line-height設置與元素高度同高。

原理：若是line-height高度大於font-size，生於高度瀏覽器會平分到文字上下兩端。

1 <div class="single_line">其實咱們每一個人的生活都是一個世界，即便最平凡的人也要爲他生活的那個世界而奮鬥。
2 </div>

1 .single_line{
height: 30px; 
font-size: 14px;
line-height: 30px;
border: 1px solid #518dca;
}

優勢：簡單明瞭

缺點：只適用於單行文本，侷限性大

7.彈性盒式佈局

利用彈性盒式佈局，將字元素的主軸、側軸的排列方式都設置爲居中對齊

原理：CSS彈性盒

1 <div class="container is-Flexbox">
2     <div class="center">既要腳踏實地於現實生活，又要不時跳出現實到理想的高臺上張望一眼。<br>在精神世界裏創建起一套豐滿的體系，引領咱們不迷失不懈怠。<br>待咱們一覺醒來，跌落在現實中的時候，能夠毫無怨言地勇敢地承擔起生活重擔。<br>這是孫少平教給個人道理。 <br>只能永遠把艱辛的勞動看作生命的必要，即便沒有收穫的期望，也心平氣靜地繼續耕種。<br>
3 要作到這一點，路還好長。
4     </div>
5 </div>

1 .is-Flexbox {display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display:  -webkit-flex; 
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

優勢：真正的垂直居中佈局

缺點：ie11纔開始支持彈性佈局