CSS實現垂直居中

時間 2019-12-08

標籤 css 實現垂直居中欄目 CSS 简体版

原文原文鏈接

垂直居中的方法有不少，在此記錄一個我找到的簡單好用的方法。html

須要規定一個父DIV和一個子DIV，子DIV在父DIV裏會垂直居中，而後把你想垂直居中的內容放在子DIV裏就能夠了。chrome

chrome、firefox和IE都可用。IE只測試了Edge和IE11。測試

 1 <html>
 2 
 3 <head>
 4     <style>
 5         .vcenter-outter {
 6             display: table;
 7             background: green;
 8             width: 100%;
 9             min-height: 300px;
10         }
11 
12         .vcenter-inner {
13             display: table-cell;
14             text-align: center;
15             vertical-align: middle;
16         }
17 
18         .vcenter-inner span {
19             background: red;
20             width: 33%;
21             height: auto;
22         }
23     </style>
24 </head>
25 
26 <body>
27     <div class="vcenter-outter">
28         <div class="vcenter-inner">
29             <span>垂直居中</span>
30         </div>
31     </div>
32 </body>
33 
34 </html>

這個方法的好處是，若是你有多個不一樣類型的元素，都想在同一行垂直居中，那麼你可使用一個父DIV套住多個子DIV。spa

 1 <html>
 2 
 3 <head>
 4     <style>
 5         .vcenter-outter {
 6             display: table;
 7             background: green;
 8             width: 100%;
 9             min-height: 300px;
10         }
11 
12         .vcenter-inner {
13             display: table-cell;
14             text-align: center;
15             vertical-align: middle;
16         }
17 
18         .vcenter-inner span {
19             background: red;
20             width: 33%;
21             height: auto;
22         }
23     </style>
24 </head>
25 
26 <body>
27     <div class="vcenter-outter">
28         <div class="vcenter-inner">
29             <span>垂直居中的span</span>
30         </div>
31         <div class="vcenter-inner">
32             <ul>
33                 <li>垂直居中的ul</li>
34                 <li>垂直居中的ul</li>
35                 <li>垂直居中的ul</li>
36                 <li>垂直居中的ul</li>
37             </ul>
38         </div>
39         <div class="vcenter-inner">
40             <img>垂直居中的img</img>
41         </div>
42     </div>
43 </body>
44 
45 </html>

參考文章：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201505121820.htmlfirefox

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。