绝对定位元素的水平垂直居中的方法

2016/12/19 8:33:10 阅读：1722 发布者：1722

1.css实现居中

　　缺点：需要提前知道元素的宽度和高度。

 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实现水平垂直居中

　　注意：无论元素的尺寸是多少，都可以居中。不过IE8以上才兼容这种写法，移动端可忽略。

 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实现居中

 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;    /* 有了这个就自动居中了 */ 
18         } 
19     </style> 
20 </head> 
21 <body> 
22     <div class="box"> 
23     </div> 
24 </body> 
25 </html>

上一篇 CSS3新特性应用之字体排印

下一篇网页布局基础

绝对定位元素的水平垂直居中的方法

文章分类

相关新闻

热门标签