标签：style blog http io color ar os 使用 sp
.middle-div{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } .parent-div{ position:relitive; }
<div class="parent-div"> <div class="middle-div"> <p>我是个高度已知的DIV，我里面的内容可以垂直+水平居中吗？</p> </div> </div>
$(".mydiv").css({
position: "absolute",
left: ($(window).width() - $(".mydiv").outerWidth())/2,
top: ($(window).height() - $(".mydiv").outerHeight())/2
});
.floater{ float:left; height:50%; margin-bottom:-120px; } .middle-div{ clear:both; height:240px; position:relitive; background:#eee; }
<div class="floater"></div> <div class="middle-div"></div>
#content { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%; background:#eee; }
<div id="content"> </div>
2.当待垂直居中的对象为单行文本或图片，高宽未知时（line-height法）： 大家公认的最简洁有效的方法：设置容器height与line-height相等，另外，加上overflow：hidden防止意外发生（此处指的容器内字体大于容器高度时的意外）。
CSS：
p.middle-p{ font:bold 12px/24px Helvertica,Arial,sans-serif; overflow:hidden; } .demo{ height:24px; color:#fff; background:#a5a5a5; font:bold 12px Helvertica,Arial,sans-serif; }
html：
<p class="demo middle-p"> 文本垂直在P中居中。去掉class中的”middle-p“，再看看效果是什么？添上”middle-p“设置字体大小为30px，看看有什么效果，去掉overflow之后呢？ </p>
该方法的缺点是只支持单行，且当<p>中为纯文字时，兼容各浏览器；当<P>中只有图片时，IE7+可使图片垂直居中。然而在FF，chrome和IE6均无效；当<p>中有图片和文字时，在IE6中无效，在IE7+，FF，Chrome下有效。
让我们试着解决只有图片时，在FF，Chrome等现代浏览器下无效的情况,在上述CSS中增加：
CSS：
p:after{ content:‘,‘; font-size:1px; visibility:hidden; }
html:
<p class="demo middle-p"> <img src="http://img.sootuu.com/vector/2006-4/2006419181421600.jpg" height="12px" width="12px"> </p>
OK！只有图片时在FF，Chrome下也可以垂直居中了！
3.当待垂直居中的对象为多行文本或其它，高宽未知时：
3.1当容器高度不固定时（padding法）： 为容器添加CSS：
.middle-div{ padding:20px 5px; background:#eee; }
html:
<div class="middle-div"> <p>你好，我在DIV中垂直居中。</p> <p>你好，我在DIV中垂直居中。</p> <p>你好，我在DIV中垂直居中。</p> <p>你好，我在DIV中垂直居中。</p> </div> <div class="middle-div"> <img src="http://img.sootuu.com/vector/2006-4/2006419181421600.jpg"> </div>
使容器padding上下相等，这是最简单的一种方法。支持各浏览器。
3.2当容器高度固定时（display：table-cell法）：
你仍然可以使用padding，不过你需要清楚知道内容的高度和精确的数学计算...这显然是不可取的。
那么当容器高度固定，待垂直居中的内容又是多行时，该如何去做呢？
一种有效的做法是将容器display:table-cell，然后使用td,th,caption等标签专有属性：vertical-align:middle;
CSS:
.middle-div{ display:table-cell; vertical-align:middle; height:500px; background:#eee; }
html:
<div class="middle-div"> <p>我想垂直居中，在一个固定高度的DIV中，可以吗？</p> <p>我想垂直居中，在一个固定高度的DIV中，可以吗？</p> <p>我想垂直居中，在一个固定高度的DIV中，可以吗？</p> </div>
Great!在IE8+，FF，Chrome下确实有效。遗憾的是IE6-7仍然无法垂直居中，因为IE6-7并不认识：table-cell属性，将其自动忽略了。
也许你会想使用table布局，这样不就可以兼容IE6-7了吗。不要试图这样做，因为使用table进行页面布局早已不被赞成。html标签是负责语义的，而不是样式。不要灰心，想让内容在IE6-7下垂直居中不妨试试这种方法：
CSS:
.parent{ height:500px; position:relative; background:#eee; } .sub-parent{ position:absolute; top:50%; } .middle-div{ position:relative; top:-50%; }
html:
<div class="parent"> <div class="sub-parent"> <div class="middle-div"> <p>我能垂直居中吗？</p> <p>我能垂直居中吗？</p> <p>我能垂直居中吗？</p> </div> </div> </div>
让人心塞的是这种方法只在IE6-7下可行，在IE8+以及FF等现代浏览器下效果反而差强人意。为什么呢？是middle-div的top:-50%出了问题。由于父容器的高度根据子容器高度计算出来的，导致-50%无效。可能的解决办法：middle-div的top:-（使用JS得出sub-parent的高度/2）px.
如果你了解一些CSS hack的技巧，结合上面的display:table-cell方法，那么一个完美的垂直居中方案将会诞生：
html与上一致；
CSS：
.parent{ height:500px; display:table-cell; vertical-align:middle; *position:relative; background:#eee; } .sub-parent{ *position:absolute; *top:50%; } .middle-div{ *position:relative; *top:-50%; }
在浏览器中看一下效果吧！这个方法看起来还不错，如果非要找一个缺点，那就是DIV嵌套多了一点.
当允许使用JS时，完全可以动态获得内容的高度，然后结合display：table-cell和margin-top：-（height/2）px来解决。从而避免了多层嵌套.具体方法见1.1
4.小结
使用CSS布局尤其需要注意浏览器的兼容，一个垂直居中让我初窥各浏览器兼容混战的冰山一角。
想要掌握垂直居中，至少要了解display，position，margin,veritcla-align,line-height,padding以及float,CSS hack等知识。CSS的知识王国不就是一个个小问题堆积出来的吗？
上述只是部分方法，可能存在错误和纰漏，欢迎指正~
标签：style blog http io color ar os 使用 sp
原文地址：http://www.cnblogs.com/eastsweeet/p/4069767.html
