全面总结使用CSS实现水平垂直居中效果的方法
|
这种方法在现代浏览器下是非常方便。但是在IE6-7中是不被支持的，因为display:table在IE6-7中不被支持，那么为了解决这种方法在IE6-7的兼容，需要额外增加一个div，并使用hack，下面我们一起来看看其解决办法。 HTML Markup
XML/HTML Code复制内容到剪贴板
<div class="table"> <div class="tableCell"> <div class="content">content</div> </div> </div>
CSS Code复制内容到剪贴板
.table { height: 300px;/*高度值不能少*/ width: 300px;/*宽度值不能少*/ display: table; position: relative; float:left; }
.tableCell { display: table-cell; vertical-align: middle; text-align: center; padding: 10px; *position: absolute; *top: 50%; *left: 50%; } .content { *position:relative; *top: -50%; *left: -50%; }
HTML Markup
XML/HTML Code复制内容到剪贴板
<body> <div id="floater"><!--This block have empty content --></div> <div id="content">Content section</div> </body>
CSS Code复制内容到剪贴板
html,body {height: 100%;} #floater{ float:left; height:50%;/*相对于父元素高度的50%*/ margin-bottom: -120px;/*值大小为居中元素高度的一半（240px/2）*/ } #content { clear:both;/*清除浮动*/ height: 240px; position: relative; }
这种方法能兼容所有浏览器，在没有足哆空间下，内容不会被切掉 缺点： 元素高度被固定死，无法达到内容自适应高度，如果居中元素加上overflow属性，要么元素出现滚动条，要么元素被切掉；另外就是一个不算缺点的缺点，那就是加了一个空标签。
Html Markup
XML/HTML Code复制内容到剪贴板
<div id="parent"> <div id="vertically_center"> （编辑：源码网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
