国产色在线视频-国产色综合一区二区三区-国产身材极品喷水 在线播放-国产深夜福利视频观看-国产深夜福利视频在线-国产深夜福利视频在线播放

絕對(duì)定位元素的水平垂直居中的方法

2016/12/19 8:33:10   閱讀：1538    發(fā)布者：1538

1.css實(shí)現(xiàn)居中

　　缺點(diǎn)：需要提前知道元素的寬度和高度。

 1 <!doctype html> 
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>Document</title> 
 6     <style> 
 7         .box{ 
 8             width: 600px;  
 9             height: 400px; 
10             position: absolute;  
11             left: 50%; top: 50%; 
12             border:1px solid #000; 
13             background:red; 
14             margin-top: -200px;    /* 高度的一半 */ 
15             margin-left: -300px;    /* 寬度的一半 */ 
16         } 
17     </style> 
18 </head> 
19 <body> 
20      
21     <div class="box"> 
22          
23     </div> 
24  
25 </body> 
26 </html>

2、css3實(shí)現(xiàn)水平垂直居中

　　注意：無(wú)論元素的尺寸是多少，都可以居中。不過(guò)IE8以上才兼容這種寫法，移動(dòng)端可忽略。

 1 <!doctype html> 
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>Document</title> 
 6     <style> 
 7         .box{ 
 8             width: 600px;  
 9             height: 400px; 
10             position: absolute;  
11             left: 50%; 
12             top: 50%; 
13             border:1px solid #000; 
14             background:red; 
15             transform: translate(-50%, -50%);    /* 50%為自身尺寸的一半 */ 
16         } 
17     </style> 
18 </head> 
19 <body> 
20     <div class="box"> 
21     </div> 
22 </body> 
23 </html>

3、margin：auto實(shí)現(xiàn)居中

 1 <!doctype html> 
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>Document</title> 
 6     <style> 
 7         .box{ 
 8             width: 600px;  
 9             height: 400px; 
10             position: absolute;  
11             left: 0; 
12             top: 0;  
13             right: 0;  
14             bottom: 0; 
15             border:1px solid #000; 
16             background:red; 
17             margin: auto;    /* 有了這個(gè)就自動(dòng)居中了 */ 
18         } 
19     </style> 
20 </head> 
21 <body> 
22     <div class="box"> 
23     </div> 
24 </body> 
25 </html>

【 微信掃一掃 】

文章分類

相關(guān)新聞

熱門標(biāo)簽