DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 純CSS實現垂直居中的9種方法
純CSS實現垂直居中的9種方法
編輯:CSS詳解     
垂直居中是布局中十分常見的效果之一,這篇文章主要介紹了純CSS實現垂直居中的9種方法,感興趣的小伙伴們可以參考一下

為實現良好的兼容性,PC端實現垂直居中的方法一般是通過絕對定位,table-cell,負邊距等方法。有了CSS3,針對移動端的垂直居中就更加多樣化。

方法1:table-cell

Html結構:

XML/Html Code復制內容到剪貼板
  1. <div class="box box1">
  2. <span>垂直居中</span>
  3. </div>

CSS:

CSS Code復制內容到剪貼板
  1. .box1{
  2. display: table-cell;
  3. vertical-align: middle;
  4. text-align: center;
  5. }


方法2:display:flex

CSS Code復制內容到剪貼板
  1. .box2{
  2. display: flex;
  3. justify-content:center;
  4. align-items:Center;
  5. }

方法3:絕對定位和負邊距

CSS Code復制內容到剪貼板
  1. .box3{position:relative;}
  2. .box3 span{
  3. position: absolute;
  4. width:100px;
  5. height: 50px;
  6. top:50%;
  7. left:50%;
  8. margin-left:-50px;
  9. margin-top:-25px;
  10. text-align: center;
  11. }

方法4:絕對定位和0

CSS Code復制內容到剪貼板
  1. .box4 span{
  2. width: 50%;
  3. height: 50%;
  4. background: #000;
  5. overflow: auto;
  6. margin: auto;
  7. position: absolute;
  8. top: 0; left: 0; bottombottom: 0; rightright: 0;
  9. }

這種方法跟上面的有些類似,但是這裡是通過margin:auto和top,left,right,bottom都設置為0實現居中,很神奇吧。不過這裡得確定內部元素的高度,可以用百分比,比較適合移動端。

方法5:translate

CSS Code復制內容到剪貼板
  1. .box6 span{
  2. position: absolute;
  3. top:50%;
  4. left:50%;
  5. width:100%;
  6. transform:translate(-50%,-50%);
  7. text-align: center;
  8. }

這實際上是方法3的變形,移位是通過translate來實現的。

方法6:display:inline-block

CSS Code復制內容到剪貼板
  1. .box7{
  2. text-align:center;
  3. font-size:0;
  4. }
  5. .box7 span{
  6. vertical-align:middle;
  7. display:inline-block;
  8. font-size:16px;
  9. }
  10. .box7:after{
  11. content:'';
  12. width:0;
  13. height:100%;
  14. display:inline-block;
  15. vertical-align:middle;
  16. }

這種方法確實巧妙...通過:after來占位。

方法7:display:flex和margin:auto

CSS Code復制內容到剪貼板
  1. .box8{
  2. display: flex;
  3. text-align: center;
  4. }
  5. .box8 span{margin: auto;}

方法8:display:-webkit-box

CSS Code復制內容到剪貼板
  1. .box9{
  2. display: -webkit-box;
  3. -webkit-box-pack:center;
  4. -webkit-box-align:center;
  5. -webkit-box-orIEnt: vertical;
  6. text-align: center
  7. }

CSS3博大精深,可以實現很多創造性的效果,需要好好研究下。

今天又發現一種方法,現在補上:

方法9:display:-webkit-box

這種方法,在 content 元素外插入一個 div。設置此 div height:50%; margin-bottom:-contentheight;。

content 清除浮動,並顯示在中間。

XML/Html Code復制內容到剪貼板
  1. <div class="floater"></div>
  2. <div class="content"> Content here </div>
CSS Code復制內容到剪貼板
  1. .floater {
  2. float:left;
  3. height:50%;
  4. margin-bottom:-120px;
  5. }
  6. .content {
  7. clear:both;
  8. height:240px;
  9. position:relative;
  10. }

優點:
適用於所有浏覽器
沒有足夠空間時(例如:窗口縮小) content 不會被截斷,滾動條出現

缺點:
唯一我能想到的就是需要額外的空元素了(也沒那麼糟,又是另外一個話題)

以上就是本文的全部內容,希望對大家的學習有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved