全面总结使用CSS实现水平垂直居中效果的方法
|
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"> （编辑：网站开发网_安阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
