标签：style blog http color ar div html log sp
①该方法只是针对内容是文本元素，对块元素不起作用，并且最好是文本元素比较少的时候，多行的时候容易若同时也设置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相关元素中实现比较好，别的元素支持度不高；
标签：style blog http color ar div html log sp
原文地址：http://www.cnblogs.com/bjchenxn/p/3948812.html
