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

CSS垂直居中的11種實現方式

本文轉載自   查看原文   2017-01-20 17:58   1599    h5 css
  1. 使用絕對定位和負外邊距對塊級元素進行垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             width: 150px;
19             height: 100px;
20             background: orange;
21             position: absolute;
22             top: 50%;
23             margin: -50px 0 0 0;
24             line-height: 100px;
25         }
26     </style>
27 
28     <body>
29 
30         <div id="box">
31             <div id="child">我是測試DIV</div>
32         </div>
33 
34     </body>
35 
36 </html>
    • 效果：
    • 注意：這個方法兼容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法准確實現垂直居中。
  2. 使用絕對定位和transform
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             background: #93BC49;
19             position: absolute;
20             top: 50%;
21             transform: translate(0, -50%);
22         }
23     </style>
24 
25     <body>
26 
27         <div id="child">
28             我是一串很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文本
29         </div>
30 
31     </body>
32 
33 </html>
    • 效果：
    • 注意：這種方法有一個非常明顯的好處就是不必提前知道被居中元素的尺寸了，因為transform中translate偏移的百分比就是相對於元素自身的尺寸而言的。
  3. 另外一種使用絕對定位和負外邊距進行垂直居中的方式
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             width: 50%;
19             height: 30%;
20             background: pink;
21             position: absolute;
22             top: 50%;
23             margin: -15% 0 0 0;
24         }
25     </style>
26 
27     <body>
28 
29         <div id="box">
30             <div id="child">我也是個測試DIV</div>
31         </div>
32 
33     </body>
34 
35 </html>
    • 效果：
    • 注意：這種方式的原理實質上和前兩種相同。補充的一點是：margin的取值也可以是百分比，這時這個值規定了該元素基於父元素尺寸的百分比，可以根據實際的使用場景來決定是用具體的數值還是用百分比。
  4. 絕對定位結合margin: auto
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             position: relative;
15         }
16         
17         #child {
18             width: 200px;
19             height: 100px;
20             background: #A1CCFE;
21             position: absolute;
22             top: 0;
23             bottom: 0;
24             margin: auto;
25             line-height: 100px;
26         }
27     </style>
28 
29     <body>
30 
31         <div id="box">
32             <div id="child">呆呆今天退役了(。﹏。)</div>
33         </div>
34 
35     </body>
36 
37 </html>
    • 效果：
    • 注意：
      　　這種實現方式的兩個核心是：把要垂直居中的元素相對於父元素絕對定位，top和bottom設為相等的值，我這里設成了0，當然你也可以設為99999px或者-99999px無論什么，只要兩者相等就行，這一步做完之后再將要居中元素的margin設為auto，這樣便可以實現垂直居中了。
      　　被居中元素的寬高也可以不設置，但不設置的話就必須是圖片這種自身就包含尺寸的元素，否則無法實現。
  5. 使用padding實現子元素的垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             background: #ddd;
13             padding: 100px 0;
14         }
15         
16         #child {
17             width: 200px;
18             height: 100px;
19             background: #F7A750;
20             line-height: 50px;
21         }
22     </style>
23 
24     <body>
25 
26         <div id="box">
27             <div id="child">今天西安的霾嚴重的嚇人，剛看了一眼PM2.5是422</div>
28         </div>
29 
30     </body>
31 
32 </html>
    • 效果：
    • 注意：
      　　這種實現方式非常簡單，就是給父元素設置相等的上下內邊距，則子元素自然是垂直居中的，當然這時候父元素是不能設置高度的，要讓它自動被填充起來，除非設置了一個正好等於上內邊距+子元素高度+下內邊距的值，否則無法精確的垂直居中。
      　　這種方式看似沒有什么技術含量，但其實在某些場景下也是非常好用的。
  6. 設置第三方基准
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14         }
15         
16         #base {
17             height: 50%;
18             background: #AF9BD3;
19         }
20         
21         #child {
22             height: 100px;
23             background: rgba(131, 224, 245, 0.6);
24             line-height: 50px;
25             margin-top: -50px;
26         }
27     </style>
28 
29     <body>
30 
31         <div id="box">
32             <div id="base"></div>
33             <div id="child">今天寫了第一篇博客，希望可以堅持寫下去！</div>
34         </div>
35 
36     </body>
37 
38 </html>
    • 效果：
    • 注意：這種方式也非常簡單，首先設置一個高度等於父元素高度一半的第三方基准元素，那么此時該基准元素的底邊線自然就是父元素縱向上的中分線，做完這些之后再給要垂直居中的元素設置一個margin-top，值的大小是它自身高度的一半取負，則實現垂直居中。
  7. 使用flex布局
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             display: flex;
15             align-items: center;
16         }
17     </style>
18 
19     <body>
20 
21         <div id="box">霧霾天氣，太久沒有打球了</div>
22 
23     </body>
24 
25 </html>
    • 效果：
  8. 第二種使用彈性布局的方式
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             display: flex;
15             flex-direction: column;
16             justify-content: center;
17         }
18         
19         #child {
20             width: 300px;
21             height: 100px;
22             background: #08BC67;
23             line-height: 100px;
24         }
25     </style>
26 
27     <body>
28 
29         <div id="box">
30             <div id="child">
31                 答案當然是多用綠色的背景哈哈
32             </div>
33         </div>
34 
35     </body>
36 
37 </html>
    • 效果：
  9. 還有一種在前面已經見到過很多次的方式就是使用 line-height 對單行文本進行垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             line-height: 300px;
15         }
16     </style>
17 
18     <body>
19 
20         <div id="box">
21             我是一段測試文本
22         </div>
23     </body>
24 
25 </html>
    • 效果：
    • 注意：這里有一個小坑需要大家注意：line-height(行高) 的值不能設為100%，我們來看看官方文檔中給出的關於line-height取值為百分比時候的描述：基於當前字體尺寸的百分比行間距。所以大家就明白了，這里的百分比並不是相對於父元素尺寸而言，而是相對於字體尺寸來講的。
  10. 使用 line-height 和 vertical-align 對圖片進行垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             line-height: 300px;
15         }
16         
17         #box img {
18             vertical-align: middle;
19         }
20     </style>
21 
22     <body>
23 
24         <div id="box">
25             <img src="duncan.jpeg">
26         </div>
27     </body>
28 
29 </html>
    • 效果：
  11. 使用 display 和 vertical-align 對容器里的文字進行垂直居中
    • 代碼： 
       1 <!DOCTYPE>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 7         <title>Document</title>
 8     </head>
 9     <style>
10         #box {
11             width: 300px;
12             height: 300px;
13             background: #ddd;
14             display: table;
15         }
16         
17         #child {
18             display: table-cell;
19             vertical-align: middle;
20         }
21     </style>
22 
23     <body>
24 
25         <div id="box">
26             <div id="child">我也是一段測試文本</div>
27         </div>
28     </body>
29 
30 </html>
    • 效果：


免責聲明！

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



猜您在找 CSS垂直居中的11種實現方式 完美實現CSS垂直居中的11種方法 css點滴1—八種方式實現元素垂直居中 css實現水平垂直居中的10種方式 CSS實現子元素水平垂直居中的6種方式 css盒子垂直居中的5種方式 CSS實現垂直居中的5種思路 [css]實現垂直居中水平居中的幾種方式 css水平垂直居中的12種方式 CSS實現垂直居中
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM