首页 > 代码库 > css垂直居中
css垂直居中
参考链接:
http://www.jianshu.com/p/eecb80ae1b18
http://blog.csdn.net/wolinxuebin/article/details/7615098
其中一种方法(这种方法只是把要居中的元素顶部,用清除浮动的方法顶住了浮动元素的底部,然后再设置position:relative;提升层级!):
html
<div id="parent"> <div id="floater"></div> <div id="child">Content here</div></div>
css
#parent {height: 250px;}#floater { float: left; height: 50%; width: 100%; margin-bottom: -50px;}#child { clear: both; height: 100px;}
设置一个浮动的子div元素,并且设置其高度等于父div元素的50%。这样子div元素就会充满父div元素的上半部分。
因为这个子div元素从正常的文档流中移除了,所以我们需要清除其它子元素两边的浮动,这里使用了clear:both
,但是实际上只需要清除和浮动元素相同方向上的浮动就可以了。
此时另一个非浮动子div元素的上边框应该与浮动子div元素的下边框重合,然后需要把非浮动子div元素往上移动其高度的一半,可以通过设置浮动子div元素的margin-bottom
值为负的非浮动子div元素高度的一半来实现。
css垂直居中
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。