首页 > 代码库 > 常用的垂直居中的方法
常用的垂直居中的方法
①该方法只是针对内容是文本元素，对块元素不起作用，并且最好是文本元素比较少的时候，多行的时候容易若同时也设置overflow:hidden;会出现断词。
<div class="content"> 这是一行文本</div>
.content{ width:200px; height:200px; line-height: 200px;}
②这种方法是本人一直比较喜欢的
在需要垂直居中的元素上方写一个浮动，但是高度是父元素50%的元素，然后再次设置，margin-bottom:垂直居中元素高度一半的负值；
但是一定要记得对垂直居中的元素设置清浮动clear:both;
虽然添加了空标签，但是相对而言还是可以的；
<div class="main"> <div class="floater"></div> <div id="content"> asdfasfasfd </div> </div>
.main{ height:500px; width:500px; background: green;}.floater{ float:left; height:50%; margin-bottom: -100px;}#content{ clear:both; height:200px; line-height: 200px; width:200px; background: pink; overflow: hidden;}
同时还有别的三种方法，是别人总结的，大家参考一下：
http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html
另外：vertical-align:middle;只是再table相关元素中实现比较好，别的元素支持度不高；
常用的垂直居中的方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。