欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面總結(jié)使用CSS實(shí)現(xiàn)水平垂直居中效果的方法

w3cplus-Airen的博客   發(fā)布時(shí)間：2016-03-10 11:22:57   作者：大漠   我要評(píng)論
這篇文章主要介紹了使用CSS實(shí)現(xiàn)水平垂直居中效果的方法的總結(jié),涵蓋了從最原始的高度設(shè)置到令人興奮的CSS3的Flexbox方式,非常全面,十分推薦!需要的朋友可以參考下

說(shuō)起水平垂直居中大家常看到的是使用絕對(duì)定位與負(fù)margin的配合或者是inline-block配合vertical-align:middle等方法。當(dāng)然還有其他一些解決方案，比如說(shuō)，在水平垂直居中系列中介紹了一些制作方案。但這些方案或多或少都存在一些局限性。假設(shè)，要垂直水平居中的元素大小是未知的，你要使用絕對(duì)定位與負(fù)margin配合就難上加難。當(dāng)然你會(huì)說(shuō)，使用表格將解決我一切所需，的確是這樣，那么除了這些方法，還有別的方案嗎？接下來(lái)我們就針對(duì)這個(gè)自設(shè)問(wèn)題，來(lái)一起探討其他幾種實(shí)現(xiàn)水平垂直居中的方案。

為了更好的闡述后面的方案，我們這里有一個(gè)命題：讓未知大小容器（未知行數(shù)的文本）實(shí)現(xiàn)水平垂直居中?？吹竭@樣的命題，有人或許會(huì)說(shuō)神經(jīng)病又來(lái)了，如果你也這么認(rèn)為，就讓當(dāng)是神病出現(xiàn)了吧。我們不糾結(jié)這個(gè)，還是看幾種解決方案吧。


方法一：最原始的方式

這種方法用來(lái)實(shí)現(xiàn)單行垂直居中是相當(dāng)?shù)暮?jiǎn)單的，你只要保證元素內(nèi)容是單行，并且其高度是固定不變的，你只要將其“line-height”設(shè)置成和“height”值一樣就Ok了。不過(guò)這種方法局限性太大，只有單行文本的元素才適用，所以在多行元素中是不能使用這種方法的。

Html Markup

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="vertical">content</div>  

   
CSS Code:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .vertical {   
  2.  height: 100px;   
  3.  line-height: 100px;/*值等于元素高度的值*/  
  4. }  

   
優(yōu)點(diǎn)：

適合在所有瀏覽器，沒(méi)有足夠空間時(shí)，內(nèi)容不會(huì)被切掉

缺點(diǎn)：

僅適合應(yīng)用在文本和圖片上，并且這種方法，當(dāng)你文本不是單行時(shí)，效果極差，差到讓你感到惡心。

這種方法對(duì)運(yùn)用在小元素上是非常有用的，比如說(shuō)讓一個(gè)button、圖片或者單行文本字段。

方法二：Flexbox方式

什么是Flexbox就不說(shuō)了，對(duì)于讓Flexbox實(shí)現(xiàn)水平垂直居中可以說(shuō)是絕對(duì)的一流。假設(shè)我想讓一張圖片（圖片大小不知）在body中實(shí)現(xiàn)水平垂直居中。

HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2.     <img src="http://img0.bdstatic.com/img/image/shouye/mxangel.jpg" alt="" />  
  3. </body>  

結(jié)構(gòu)非常簡(jiǎn)單，body中有一張圖片。

CSS

我們要做的是，如何使用Flexbox讓img在body中實(shí)現(xiàn)水平垂直居中。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. *{   
  2.   margin: 0;   
  3.   padding:0;   
  4.   -webkit-box-sizing: border-box;   
  5.   box-sizing: border-box;   
  6. }   
  7. html,   
  8. body {   
  9.   height: 100%;   
  10. }   
  11. body {   
  12.   display: flex;   
  13.   align-items: center;   
  14.   justify-content: center;   
  15.   width: 100%;/*firefox下需要*/  
  16. }  

代碼就這么幾行，有一個(gè)關(guān)鍵之處，需要將html和body高度設(shè)置為100%;然后只需要在body中配置樣式。此處使用了Flexbox中的居中屬性。至于他們?cè)恚@里就不多說(shuō)了，感興趣的同學(xué)可以看看Flexbox相關(guān)的教程。


方法三：transform與絕對(duì)定位方式

在當(dāng)今天移動(dòng)設(shè)備橫行天下的年代，給我們前端人員制作頁(yè)面帶來(lái)無(wú)盡的煩惱，具體原因，大家都懂的。那么這里我們來(lái)模擬一個(gè)情形。有一個(gè)彈出層，我不知道他的大小有多大，我想讓他在各種設(shè)備中永遠(yuǎn)水平居中。在下面示例中，我們用一個(gè)Dive來(lái)當(dāng)作是彈出窗吧（偷懶了，不想花太多時(shí)間去做這個(gè)彈出窗效果）。

回到我們問(wèn)題所在，在示例中有這樣的一個(gè)結(jié)構(gòu)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="modal">  
  2.     <div class="modal-header">彈出窗標(biāo)題</div>  
  3.     <div class="modal-body">在當(dāng)今天移動(dòng)。。。</div>  
  4. </div>  

結(jié)構(gòu)不分析了。直接看CSS:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. *{   
  2.   margin: 0;   
  3.   padding:0;   
  4.   -webkit-box-sizing: border-box;   
  5.   box-sizing: border-box;   
  6. }   
  7. html,   
  8. body {   
  9.   height: 100%;   
  10. }   
  11.   
  12. .modal {   
  13.   border: 1px solid #bbb;   
  14.   border-radius: 5px;   
  15.   box-shadow: 0 0 3px rgba(0,0,0,.5);   
  16.   
  17.   position:absolute;   
  18.   top:50%;   
  19.   left: 50%;   
  20.   -webkit-transform: translate(-50%, -50%);   
  21.   transform: translate(-50%, -50%);   
  22. }   
  23. .modal-header {   
  24.   padding: 10px 20px;   
  25.   background: rgba(0,0,0,.25);   
  26.   color:#fff;   
  27. }   
  28. .modal-body{   
  29.   padding: 20px;   
  30.   background: #fff;   
  31. }  

方法四：div
使用div模擬表格效果，也就是說(shuō)將多個(gè)<div>的“display”屬性設(shè)置為禾“table”和“table-cell”，并設(shè)置他們的“vertical-align”的屬性值為“middle”。
HTML Code

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div id="container">  
  2.  <div id="content">content</div>  
  3. </div>  

   
CSS Code

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #container {   
  2.  height: 300px;   
  3.  display: table;/*讓元素以表格形式渲染*/  
  4. }   
  5. #content {   
  6.  display:table-cell;/*讓元素以表格的單元素格形式渲染*/  
  7.  vertical-align: middle;/*使用元素的垂直對(duì)齊*/  
  8. }     

   
優(yōu)點(diǎn)：

這種方法不會(huì)像前面的兩種方法一樣，有高度的限制，此方法可以要據(jù)元素內(nèi)容動(dòng)態(tài)的改變高度，從而也就沒(méi)有空間的限制，元素的內(nèi)容不會(huì)因?yàn)闆](méi)足夠的空間而被切斷或者出現(xiàn)難看的滾動(dòng)條。

缺點(diǎn)：

不足之處呢？這種方法只適合現(xiàn)代瀏覽器，在IE6-7下無(wú)法正常運(yùn)行；而且較前兩者而言，結(jié)構(gòu)也更復(fù)雜。

這種方法在現(xiàn)代瀏覽器下是非常方便。但是在IE6-7中是不被支持的，因?yàn)閐isplay:table在IE6-7中不被支持，那么為了解決這種方法在IE6-7的兼容，需要額外增加一個(gè)div，并使用hack，下面我們一起來(lái)看看其解決辦法。

HTML Markup

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="table">  
  2.  <div class="tableCell">  
  3.   <div class="content">content</div>  
  4.  </div>  
  5. </div>  

   
CSS Code

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .table {   
  2.  height: 300px;/*高度值不能少*/  
  3.  width: 300px;/*寬度值不能少*/  
  4.  display: table;   
  5.  position: relative;   
  6.  float:left;   
  7. }     
  8.   
  9. .tableCell {   
  10.  display: table-cell;   
  11.  vertical-align: middle;   
  12.  text-align: center;      
  13.  padding: 10px;   
  14.  *position: absolute;   
  15.  *top: 50%;   
  16.  *left: 50%;   
  17. }   
  18. .content {   
  19.  *position:relative;   
  20.  *top: -50%;   
  21.  *left: -50%;   
  22. }  

   
還有一種方法、有點(diǎn)新意，用這種方法你需要在居中元素前面放一個(gè)空的<div>（塊元素就可以），然后設(shè)置這個(gè)<div>的高度為50%，margin-bottom為元素高度的一半，而且居中元素需要清除浮動(dòng)。需要注意的是，使用這種方法，如果你的居中元素是放在body中的話，你需要給html,body設(shè)置一個(gè)“height:100%”的屬性。

HTML Markup

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2.  <div id="floater"><!--This block have empty content --></div>  
  3.  <div id="content">Content section</div>  
  4. </body>  

   
CSS Code

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html,body {height: 100%;}   
  2. #floater{   
  3.  float:left;   
  4.  height:50%;/*相對(duì)于父元素高度的50%*/  
  5.  margin-bottom: -120px;/*值大小為居中元素高度的一半（240px/2）*/  
  6. }   
  7. #content {   
  8.  clear:both;/*清除浮動(dòng)*/  
  9.  height: 240px;   
  10.  position: relative;   
  11. }  

   
優(yōu)點(diǎn)：

這種方法能兼容所有瀏覽器，在沒(méi)有足哆空間下，內(nèi)容不會(huì)被切掉

缺點(diǎn)：

元素高度被固定死，無(wú)法達(dá)到內(nèi)容自適應(yīng)高度，如果居中元素加上overflow屬性，要么元素出現(xiàn)滾動(dòng)條，要么元素被切掉；另外就是一個(gè)不算缺點(diǎn)的缺點(diǎn)，那就是加了一個(gè)空標(biāo)簽。


方式五：display:inline-block
這種方法是采用的display:inline-block，然后借助另一個(gè)元素的高度來(lái)實(shí)現(xiàn)居中

Html Markup

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div id="parent">  
  2.  <div id="vertically_center">  
  3.   <p>I am vertically centered!</p>  
  4.  </div>  
  5.  <div id="extra"><!-- ie comment --></div>  
  6. </div>  

   
CSS Code

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2. html,   
  3. body{   
  4.  height: 100%;   
  5. }   
  6.   
  7. #parent {   
  8.  height: 500px;/*定義高度，讓線盒型div#extra有一個(gè)參照物，可以是固定值，也可以是百分比*/  
  9.  border: 1px solid red;   
  10. }   
  11. #vertically_center,   
  12. #extra {   
  13.  display: inline-block;/*把元素轉(zhuǎn)為行內(nèi)塊顯示*/  
  14.  vertical-align: middle;/*垂直居中*/  
  15. }   
  16. #extra {   
  17.  height: 100%; /*設(shè)置線盒型為父元素的100%高度*/  
  18. }   
  19. </style>   
  20.   
  21. <!--[if lt IE 8]>   
  22.  <style type="text/css">   
  23.   /*IE6-7不支持display:inline-block，所以在ie6-7另外寫(xiě)一個(gè)hack，用來(lái)支持ie6-7*/  
  24.   #vertically_center,   
  25.   #extra {   
  26.    display: inline;   
  27.    zoom: 1;   
  28.   }   
  29.   #extra {   
  30.   width: 1px;   
  31.   }   
  32.  </style>   
  33. <![endif]-->  

   
優(yōu)點(diǎn)：

可以自適應(yīng)高度，簡(jiǎn)單易懂

缺點(diǎn)：

需要給元素的父元素設(shè)置一個(gè)高度，這個(gè)高度可以是一個(gè)固定值或者百分值高度，另外需要增加一個(gè)額外的標(biāo)簽，當(dāng)作線盒型，如div#extra，并且需要設(shè)置其高度為100%。另外就是ie6-7不支持display:inline-block，需要給他們另外寫(xiě)一個(gè)樣式。

方式六：
這個(gè)方法是針對(duì)多行內(nèi)容居中，而且容器高度是可變的，方法很簡(jiǎn)單，就是給出上下一樣的padding值

Html Code

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="columns">  
  2.  <div class="item">test</div>  
  3. </div>  

    
CSS Code

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .item {padding-top:30px;padding-bottom:30px;}  

    
優(yōu)點(diǎn)：

在所有瀏覽器下能正常工作，支持所有元素，簡(jiǎn)單易懂，結(jié)構(gòu)清晰

缺點(diǎn)：

使用這種方法不能給容器固定高度，如果固定高度將無(wú)法達(dá)到效果。

相關(guān)文章

最新評(píng)論