如何中心我的div

我GOOGLE了很多次，我不明白爲什麼我的div不會居中。如何中心我的div

HTML：

<body><div id="mydiv"></div></body>

CSS

*{ 
    margin:0; 
    padding:0; 
}   
html,body{height:100%; width:100%;} 

#mydiv{ 
      height:50%; 
      width:50%; 
      background:grey; 
      margin:auto; 

}

它只水平和中心不會垂直居中，什麼因爲我不是看到它的問題。

來源

2013-03-14 Larry

試着這麼做：

#mydiv { 
    height:50%; 
    width:50%; 
    background:grey; 
    position:absolute; 
    top:25%; 
    left:25%; 
}

來源

2013-03-14 00:45:05 faino

如果您還需要垂直居中，請參閱死點中心方法，您將需要一些額外的<div> s，但它應該有所幫助！

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

來源

2013-03-14 00:38:40 Jace

要垂直對齊，你可以嘗試設置你的保證金，像這樣：

#myDiv{margin:50% auto;}

當然這將取決於你的包含元素。但是，如果作爲您提供的標記，它應該顯示在垂直中心對齊...

來源

2013-03-14 00:41:41 lukeocom

這實際上是將父容器的50％放置在孩子的頂部和父母的頂部之間;因此，低於兒童底部0％。即（50/50/50 ... 150％高） - 與一個50％高的孩子。 – Dawson 2013-03-14 00:45:37

Hopely對您有用： http://jsfiddle.net/Ug3RM/

#mydiv{ 
     position:absolute; 
     top:50%; 
     left:50%; 
     height:50%; 
     width:50%; 
     margin-top:-25%; 
     margin-left:-25%; 
     background:grey; 

}

來源

2013-03-14 00:44:20 egig

OP，

檢查this Fiddle。垂直和水平居中。

使用display:table和display:table-cell方法，其方便地允許vertical-align: middle與margin: auto配對。

希望它有幫助。

來源

2013-03-14 00:49:27 couzzi

如何中心我的div

回答

相關問題