首页 > 建站教程 > Div+Css >  块状容器垂直居中解决办法正文

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

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

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>
以上是我爱模板网总结,转载请注明出处!