如何让DIV垂直居中

2012-07-04

怎么让DIV垂直居中margin:auto 就可以水平居中，那么垂直居中怎么办？谢谢[解决办法]有多种情形，请参考http:

怎么让DIV垂直居中
margin:auto 就可以水平居中，那么垂直居中怎么办？谢谢

[解决办法]
有多种情形，请参考http://dudo.org/archives/2008060122236.html。
如果是固定尺寸，可以这样：

CSS code

<style>  #warp {  position: absolute;     width:500px;     height:200px;     left:50%;     top:50%;     margin-left:-250px;     margin-top:-100px;     border: solid 3px red;   }</style>
[解决办法]
探讨

有多种情形，请参考http://dudo.org/archives/2008060122236.html。
如果是固定尺寸，可以这样：
CSS code
<style>  
#warp {
  position: absolute;   
  width:500px;   
  height:200px;   
  left:50%;   
  top:50%;   
  margin-l……

[解决办法]
最外层加个table就好办了。


[解决办法]
加table?
[解决办法]
HTML code<!DOCTYPE HTML><html lang=""><head>    <meta charset="gbk">    <title></title>    <style type="text/css">        body {padding: 0; margin: 0;}         body,html{height: 100%;}         #outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}         #outer[id] {display: table; position: static;}         #middle {position: absolute; top: 50%;} /* for explorer only*/         #middle[id] {display: table-cell; vertical-align: middle; position: static;}         #inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */         div.greenBorder {border: 1px solid green; background-color: ivory;}        </style></head><body>    <div id="outer">       <div id="middle">           <div id="inner" class="greenBorder">           </div>       </div>     </div></body></html>
[解决办法]
探讨

HTML code

<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="gbk">
    <title></title>
    <style type="text/css">
        body {padding: 0; margin: 0;} 
        body,html{height: 100%;} 
   ……

[解决办法]
<style> 
#warp {
 position: absolute;  
 width:500px;  
 height:200px;  
 left:50%;  
 top:50%;  
 margin-left:-250px;  
 margin-top:-100px;  
 border: solid 3px red;  
}
</style>
[解决办法]
margin:0 auto;
不就行了吗。
[解决办法]
vertical-align:middle;
或
.align-center{  
position:fixed;
left:50%;
top:50%;
margin-left:width/2;
margin-top:height/2;
}

[解决办法]
同上 +1
[解决办法]
正解。

探讨

vertical-align:middle; /*一般不复杂的用这个就可以了*/
或
.align-center{ 
position:fixed;
left:50%;
top:50%;
margin-left:width/2;
margin-top:height/2;
}

热点排行