Question

我已多次使用Google搜索，我无法理解为什么我的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;

}

它只是水平居中，不会垂直居中，是什么问题，因为我没有看到它。

Answer 1

如果您也需要垂直居中，请参考死点中心方法，您需要额外的<div>，但它应该有所帮助！

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

Answer 2

希望对您有用： http://jsfiddle.net/Ug3RM/

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

 }

Answer 3

尝试类似：

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

Answer 4

要进行垂直对齐，您可以尝试设置边距，如下所示：

#myDiv{margin:50% auto;}

当然这取决于你的含元素。但是，如果标记与您提供的一样，它应该在中心垂直对齐显示...

Answer 5

OP，

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

使用display:table和display:table-cell方法，方便vertical-align: middle与margin: auto配对。

希望它有所帮助。

如何集中我的div

5 个答案: