html - 如何使我的 div 居中

Question

我用谷歌搜索了很多次，我不明白为什么我的 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;

}

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

 }

score 1 · Accepted Answer

尝试类似：

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

score 0 · Accepted Answer

操作，

检查这个小提琴。垂直和水平居中。

使用display:tableanddisplay:table-cell方法，可以方便vertical-align: middle地与margin: auto.

希望能帮助到你。

score 0 · Accepted Answer

要垂直对齐，您可以尝试像这样设置边距：

#myDiv{margin:50% auto;}

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

html - 如何使我的 div 居中

5 回答 5

Related

Reference