css系列（佈局）：實現一個元素在瀏覽器中水平、垂直居中的幾個方案

時間 2019-12-04

標籤 css 系列佈局實現一個元素瀏覽器水平垂直居中幾個方案欄目 CSS 简体版

原文原文鏈接

在開發中偶遇須要一個元素垂直居中的需求，以前都是水平居中，垂直居中使用的比較少，通過一通研究，選擇了幾種相對比較實用的方案分享，拋磚引玉，若有遺漏不足，還望不吝指正。html

方案一（IE7下該方案沒法實現垂直居中）：瀏覽器

經過設置父級的的塊屬性實現，將父級元素手動轉換位display:table-cell屬性，而後使用表格的vertical-align: middle屬性，實現元素的垂直居中，子元素繼續使用margin:0 auto;實現水平居中便可ide

代碼以下：spa

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .container{
12             width: 500px;
13             height: 500px;
14             display: table-cell;
15             vertical-align: middle;
16             background: green;
17         }
18         .box{
19             width: 100px;
20             height: 100px;
21             background: #f00;
22             margin: 0 auto;
23         }
24     </style>
25 </head>
26 <body>
27 
28 <div class="container">
29     <div class="box"></div>
30 </div>
31 </body>
32 </html>

View Code

方案二（IE7下該方案無效）：code

使用position:absolute,設置left、top、bottom、right、margin的屬性htm

代碼以下：blog

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .box{
12             width: 100px;
13             height: 100px;
14             background: #f00;
15             position: absolute;
16             top: 0;
17             left: 0;
18             bottom: 0;
19             right: 0;
20             margin: auto;
21         }
22     </style>
23 </head>
24 <body>
25 <div class="box"></div>
26 </body>
27 </html>

View Code

方案三（完美兼容）：開發

使用position:absolute,設置left、top、margin-left、margin-top的屬性，這種方法基本瀏覽器都可以兼容，不足之處就是須要固定寬高。it

代碼以下：io

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .box{
12             width: 100px;
13             height: 100px;
14             background: #f00;
15             position:absolute;
16             top:50%;
17             left:50%;
18             margin-top:-50px;
19             margin-left:-50px;
20         }
21     </style>
22 </head>
23 <body>
24 <div class="box"></div>
25 </body>
26 </html>