块状容器垂直居中解决办法

我爱模板网在做网站时，遇到了一个情况：块状标签垂直居中，百度了很多都没有用，所以自己总结了下，给有需要的朋友，绝对可用：

1、对于固定高度的容器的垂直居中问题，给它的父容器"position:relative"，它自己"position:absolute; top:50%; margin-top:负它的高度的一半;"，这种方法完美兼容IE6，但是缺陷是比如容器固定高度。如果看不懂，看下面的例子：

<style>
/*假设我们希望容器 #box 垂直居中*/
/*给父容器相对定位，如果父容器是body，给不给无所谓*/
#father{position:relative}
/*下面是 box 容器*/
#box{width:200px; height:200px; background:red; position:absolute; top:50%; margin-top:-100px;}
</style>
<div id="father">
      <div id="box">box容器垂直居中</div>
</div>

2、对于容器高度不固定，可以给固定容器的父容器"display:table"，给它"display:table-cell;  vertical-align:middle;"，这种方法的优点是，不论它里面放什么内容，如图片、文字、整行标签、内嵌标签等等，都会垂直居中，并且可以不固定高度，缺点是，不兼容IE7及其以下的浏览器。看下面的例子：

<style>
/*不知道容器的高度*/
#outDiv{display:table; height:500px; border:1px solid red;}
#innerDiv{display:table-cell; vertical-align:middle; border:1px solid blue;}
</style>
<div id="outDiv">
	<div id="innerDiv">
    	html静态模板<br />
		文字文字
        <img width="50" src="http://www.5imoban.net/uploads/allimg/151019/2012514138-0.gif" />
        <p>这是一段段落</p>
    </div>
</div>

以上是我爱模板网总结，转载请注明出处！


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！