如何只用CSS做到完全居中

我们都知道 margin:0 auto; 的样式能让元素水平居中，而 margin: auto; 却不能做到垂直居中……直到现在。

transform法

和“完全居中”法的好处一样，简单有效，同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7     .parent{width:200px;height:200px;background-color:#00FFFF;}
 8     .child{
 9         position:relative;top:50%;left:50%;
10         height:100px;width:100px;
11         background-color:red;
12         -webkit-transform:translate(-50%,-50%);
13         -moz-transform:translate(-50%,-50%);
14         -ms-transform:translate(-50%,-50%);
15         -o-transform:translate(-50%,-50%);
16         transform:translate(-50%,-50%);
17     }
18     </style>
19 </head>
20 <body>
21 <div class="parent">
22     <div class="child"></div>
23 </div>
24 注意:    <br>
25 好处:内容高度可变,并且代码量小<br>
26 缺点:不支持    IE8 需要些产商前缀 会和其他transform样式有冲突 某些情况下的边缘和字体渲染会有问题<br>
27 </body>
28 </html>

好处：

  • 内容高度可变
  • 代码量小

同时注意：

  • 不支持IE8
  • 需要写厂商前缀
  • 会和其他transform样式有冲突
  • 某些情况下的边缘和字体渲染会有问题

table-cell法

这种可能是最好的方法，因为高度可以随内容改变，浏览器支持也不差。主要缺陷是会产生额外的标签，每一个需要居中的元素需要三个额外的HTML标签。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table-cell方法</title>
 6     <style type="text/css">
 7     .Center-Container.is-Table{display:table;}
 8     .is-Table .Table-Cell{display:table-cell;vertical-align:middle;}
 9     .is-Table .Center-Block{width:50%;margin:0 auto;} 
10     </style>
11 </head>
12 <body>
13 <div class="Center-Container is-Table">
14     <div class="Table-Cell">
15         <div class="Center-Block">
16         table-cell方法:<br/>
17         优点:内容高度可变 内容溢出则能自动撑开父元素高度 浏览器兼容性好<br/>
18         缺点:需要额外的 HTML 标签 <br/>
19         </div>
20     </div>
21 </div>        
22 </body>
23 </html>

好处：

  • 内容高度可变
  • 内容溢出则能自动撑开父元素高度
  • 浏览器兼容性好

同时注意：

  • 需要额外的HTML标签
posted @ 2016-08-22 16:19  SkyTeam_LBM  阅读(275)  评论(0)  编辑  收藏  举报