码迷,mamicode.com
首页 > Web开发 > 详细

css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案

时间:2016-07-13 20:17:03      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:

在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正。

方案一(IE7下该方案无法实现垂直居中):

通过设置父级的的块属性实现,将父级元素手动转换位display:table-cell属性,然后使用表格的vertical-align: middle属性,实现元素的垂直居中,子元素继续使用margin:0 auto;实现水平居中即可

代码如下:

技术分享
 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下该方案无效):

使用position:absolute,设置left、top、bottom、right、margin的属性

代码如下:

技术分享
 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的属性,这种方法基本浏览器都能够兼容,不足之处就是需要固定宽高。

代码如下:

技术分享
 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>
View Code

css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案

标签:

原文地址:http://www.cnblogs.com/humaotegong/p/5667359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!