如何中心我的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

回答

相关问题