如何让DIV垂直居中-HTML教程-爱易网页

如何让DIV垂直居中

日期：2014-05-17　浏览次数：20777 次

怎么让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;
}

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

如何让DIV垂直居中

相关资料更多>

推荐阅读更多>