碼上歡樂
相關內容    簡體    繁體

CSS中盒子垂直居中的常用方法

本文轉載自   查看原文   2017-09-25 19:57   1242 

在前端開發過程中，盒子居中是常常用到的。其中 ，居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設置元素的margin: 0 auto就可以實現。但是垂直居中相對來說是比較復雜一些的。下面我們一起來討論一下實現垂直居中的方法。

首先，定義一個需要垂直居中的div元素，他的寬度和高度均為300px，背景色為橙色。代碼如下：

 

 
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>index</title>  
  6.     <style>  
  7.         .content {  
  8.             width: 300px;  
  9.             height: 300px;  
  10.             background: orange;  
  11.         }  
  12.     </style>  
  13. </head>  
  14. <body>  
  15.     <div class="content"></div>  
  16. </body>  
  17. </html>  

 

我們需要使得這個橙色的div居中，到底該怎么辦呢？首先我們實現水平居中，上面已經提到過了，可以通過設置margin: 0 auto實現水平居中，代碼如下：

 
 <!DOCTYPE html >  
  1. <html lang="en">  
  2. <head>  
  3.     <meta charset="UTF-8">  
  4.     <title>index</title>  
  5.     <style>  
  6.         .content {  
  7.             width: 300px;  
  8.             height: 300px;  
  9.             background: orange;  
  10.             margin: 0 auto;  
  11.         }  
  12.     </style>  
  13. </head>  
  14. <body>  
  15.     <div class="content"></div>  
  16. </body>  
  17. </html>  

效果如下：

 

很好，已經實現水平居中了！接下來該打大boss了——實現垂直居中。不過，在這之前，我們先要設置div元素的祖先元素html和body的高度為100%（因為他們默認是為0的），並且清除默認樣式，即把margin和padding設置為0（如果不清除默認樣式的話，瀏覽器就會出現滾動條，聰明的親，自己想想問什么）。

 

 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>index</title>  
  6.     <style>  
  7.         html, body {  
  8.             width: 100%;  
  9.             height: 100%;  
  10.             margin: 0;   
  11.             padding: 0;  
  12.         }  
  13.         .content {  
  14.             width: 300px;  
  15.             height: 300px;  
  16.             background: orange;  
  17.             margin: 0 auto; /*水平居中*/  
  18.         }  
  19.     </style>  
  20. </head>  
  21. <body>  
  22.     <div class="content"></div>  
  23. </body>  
  24. </html>  

接下來，需要做的事情就是要讓div往下移動了。我們都知道top屬性可以使得元素向下偏移的。但是，由於默認情況下，元素在文檔流里是從上往下、從左到右緊密的布局的，我們不可以直接通過top屬性改變它的垂直偏移。這就需要使用position屬性，設置它的值為relative，就可以通過top、bottom、right、left等屬性使它在正常的文檔流中發生位置偏移（注意，此時它在並沒有脫離文檔流，原來的位置還會占據着的！）。對於position屬性不熟悉的，可以自己去w3c看一下。設置了position: relative后的代碼如下:
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>index</title>  
  6.     <style>  
  7.         html, body {  
  8.             width: 100%;  
  9.             height: 100%;  
  10.             margin: 0;  
  11.             padding: 0;  
  12.         }  
  13.         .content {  
  14.             width: 300px;  
  15.             height: 300px;  
  16.             background: orange;  
  17.             margin: 0 auto; /*水平居中*/  
  18.             position: relative; /*脫離文檔流*/  
  19.         }  
  20.     </style>  
  21. </head>  
  22. <body>  
  23.     <div class="content"></div>  
  24. </body>  
  25. </html>  
  26.      

我們刷新一下頁面，發現跟之前是沒有任何變化的，因為，我們僅僅是使div脫離了文檔流，但是還沒開始移動他的垂直偏移。好，下面我們就讓它偏移吧！垂直偏移需要用到top屬性，它的值可以是具體的像素，也可以是百分數。因為我們現在不知道父元素（即body）的具體高度，所以，是不可以通過具體像素來偏移的，而應該用百分數。既然是要讓它居中嘛！好，那么我們就讓它的值為50%不就行了嗎？問題真的那么簡單，我們來試一下，就設置50%試一下：

 

 

 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>index</title>  
  6.     <style>  
  7.         html,body {  
  8.             width: 100%;  
  9.             height: 100%;  
  10.             margin: 0;  
  11.             padding: 0;  
  12.         }  
  13.         .content {  
  14.             width: 300px;  
  15.             height: 300px;  
  16.             background: orange;  
  17.             margin: 0 auto; /*水平居中*/  
  18.             position: relative; /*脫離文檔流*/  
  19.             top: 50%; /*偏移*/  
  20.         }  
  21.     </style>  
  22. </head>  
  23. <body>  
  24.     <div class="content"></div>  
  25. </body>  
  26. </html>  


效果如下圖所示：

 

div垂直方向上面並沒有居中。明顯是偏下了。下面，我們在瀏覽器中間畫一條紅線用來參考，如下圖：


通過觀察上圖，只要讓div的中心移動到紅線的位置，那么整個div就居中了。那怎么讓它中心移動到紅線處呢？從圖中可以觀察到，從div的中心到紅線的距離是div自身高度的一半。這時候，我們可以使用通過margin-top屬性來設置，因為div的自身高度是300，所以，需要設置他的margin-top值為-150。為什么是要設置成負數的呢？因為正數是向下偏移，我們是希望div向上偏移，所以應該是負數，如下：

 
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>index</title>  
  6.     <style>  
  7.         html,body {  
  8.             width: 100%;  
  9.             height: 100%;  
  10.             margin: 0;  
  11.             padding: 0;  
  12.         }  
  13.         .content {  
  14.             width: 300px;  
  15.             height: 300px;  
  16.             background: orange;  
  17.             margin: 0 auto; /*水平居中*/  
  18.             position: relative; /*脫離文檔流*/  
  19.             top: 50%; /*偏移*/  
  20.             margin-top: -150px;   
  21.         }  
  22.     </style>  
  23. </head>  
  24. <body>  
  25.     <div class="content"></div>  
  26. </body>  
  27. </html>  

 

 

確實已經居中了。好興奮！有木有？！

    

除了可以使用margin-top把div往上偏移之外，CSS3的transform屬性也可以實現這個功能，通過設置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。如下：
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>index</title>  
  6.     <style>  
  7.         html,body {  
  8.             width: 100%;  
  9.             height: 100%;  
  10.             margin: 0;  
  11.             padding: 0;  
  12.         }  
  13.         .content {  
  14.             width: 300px;  
  15.             height: 300px;  
  16.             background: orange;  
  17.             margin: 0 auto; /*水平居中*/  
  18.             position: relative; /*脫離文檔流*/  
  19.             top: 50%; /*偏移*/  
  20.             transform: translateY(-50%);  
  21.         }  
  22.     </style>  
  23. </head>  
  24. <body>  
  25.     <div class="content"></div>  
  26. </body>  
  27. </html>  

效果如下：


上面的兩種方法，我們都是基於設置div的top值為50%之后，再進行調整垂偏移量來實現居中的。如果使用CSS3的彈性布局（flex）的話，問題就會變得容易多了。使用CSS3的彈性布局很簡單，只要設置父元素（這里是指body）的display的值為flex即可。

 

 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>index</title>  
  6.     <style>  
  7.         html,body {  
  8.             width: 100%;  
  9.             height: 100%;  
  10.             margin: 0;  
  11.             padding: 0;  
  12.         }  
  13.    
  14.         body {  
  15.             display: flex;  
  16.             align-items: center; /*定義body的元素垂直居中*/  
  17.             justify-content: center; /*定義body的里的元素水平居中*/  
  18.         }  
  19.         .content {  
  20.             width: 300px;  
  21.             height: 300px;  
  22.             background: orange;          
  23.         }  
  24.     </style>  
  25. </head>  
  26. <body>  
  27.     <div class="content"></div>  
  28. </body>  
  29. </html>  

效果：

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS 實現盒子水平居中、垂直居中和水平垂直居中的方法 CSS實現垂直居中的常用方法 CSS（九）：設置盒子水平垂直居中 css盒子垂直居中的5種方式 div盒子水平垂直居中的方法 div盒子水平垂直居中的方法 css_css 盒子水平居中 垂直居中 CSS--幾種常用的水平垂直居中對齊方法 Web前端 css實現元素垂直居中的常用方法 div垂直居中 css div盒子上下垂直居中
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM