CSS中如何实现DIV容器垂直居中

ExampleSourceCode

DIV{  padding:25px;  }

这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

SourceCodetoRun

       body{font-size:12px;font-family:tahoma;}   DIV{    padding:25px;    border:1pxsolid#FF0099;    background-color:#FFCCFF;    width:760px;   }      
现在我们要使这段文字垂直居中显示！   DIV{    padding:25px;    border:1pxsolid#FF0099;    background-color:#FFCCFF;   }  
  

[可先修改部分代码再运行查看效果]

三、多行文本固定高度的居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟

DIV#wrap{  height:400px;  display:table;  }  DIV#content{  vertical-align:middle;  display:table-cell;  border:1pxsolid#FF0099;  background-color:#FFCCFF;  width:760px;  }

       body{font-size:12px;font-family:tahoma;}   DIV#wrap{    height:400px;    display:table;   }   DIV#content{    vertical-align:middle;    display:table-cell;    border:1pxsolid#FF0099;    background-color:#FFCCFF;    width:760px;   }       
现在我们要使这段文字垂直居中显示！   DIV#wrap{    height:400px;    display:table;   }   DIV#content{    vertical-align:middle;    display:table-cell;    border:1pxsolid#FF0099;    background-color:#FFCCFF;    width:760px;   }  

[可先修改部分代码再运行查看效果]
这个方法应该是很理想了，但是不幸的是InternetExplorer6并不能正确地理解display:table和display:table-cell，因此这种方法在InternetExplorer6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

四、在InternetExplorer中的解决方案

在InternetExplorer6及以下版本中，在高度的计算上存在着缺陷的。在InternetExplorer6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

ExampleSourceCode

如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现InternetExplorer6中的垂直居中：

ExampleSourceCode

DIV#wrap{  border:1pxsolid#FF0099;  background-color:#FFCCFF;  width:760px;  height:400px;  position:relative;  }  DIV#subwrap{  position:absolute;  border:1pxsolid#000;  top:50%;  }  DIV#content{  border:1pxsolid#000;  position:relative;  top:-50%;  }

当然，这段代码只能在InternetExlporer6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释InternetExlporer6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

SourceCodetoRun

       body{font-size:12px;font-family:tahoma;}   DIV#wrap{    border:1pxsolid#FF0099;    background-color:#FFCCFF;    width:760px;    height:400px;    position:relative;   }   DIV#subwrap{    position:absolute;    top:50%;   }   DIV#content{    position:relative;    top:-50%;   }           
现在我们要使这段文字垂直居中显示！   DIV#wrap{    border:1pxsolid#FF0099;    background-color:#FFCCFF;    width:760px;    height:500px;    position:relative;   }   DIV#subwrap{    position:absolute;    border:1pxsolid#000;    top:50%;   }   DIV#content{    border:1pxsolid#000;    position:relative;    top:-50%;   }
        

[可先修改部分代码再运行查看效果]

五、***的解决方案

那么我们综合上面两种方法就可以得到一个***的解决方案，不过这要用到CSShack的知识。

ExampleSourceCode

DIV#wrap{  display:table;  border:1pxsolid#FF0099;  background-color:#FFCCFF;  width:760px;  height:400px;  _position:relative;  overflow:hidden;  }  DIV#subwrap{  vertical-align:middle;  display:table-cell;  _position:absolute;  _top:50%;  }  DIV#content{  _position:relative;  _top:-50%;  }

至此，一个***的居中方案就产生了。

SourceCodetoRun

       body{font-size:12px;font-family:tahoma;}   DIV#wrap{    display:table;    border:1pxsolid#FF0099;    background-color:#FFCCFF;    width:760px;    height:400px;    _position:relative;    overflow:hidden;   }   DIV#subwrap{    vertical-align:middle;    display:table-cell;    _position:absolute;    _top:50%;   }   DIV#content{    _position:relative;    _top:-50%;   }           
现在我们要使这段文字垂直居中显示！   DIV#wrap{    border:1pxsolid#FF0099;    background-color:#FFCCFF;    width:760px;    height:500px;    position:relative;   }   DIV#subwrap{    position:absolute;    border:1pxsolid#000;    top:50%;   }   DIV#content{    border:1pxsolid#000;    position:relative;    top:-50%;   }
        

[可先修改部分代码再运行查看效果]

垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

到此，相信大家对"CSS中如何实现DIV容器垂直居中"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

扫描关注千家信息网微信公众号，第一时间获取内容更新动态

转载请说明来源于"千家信息网"

本文地址：https://www.qianjiagd.com/a71158