Question

我真的认为这很简单，但我会失去理智！我只是想简单地将div放在屏幕的div中。但不是div的左上角到屏幕的中心，而是div的中心位于中心。

这是我的div css

.box
{
    padding-top:20px;
    padding-left:5px;
    background-color: #ffffff;
    background-color: rgba(221,221,221,0.5);
    border: 1px solid black;
    border-radius: 25px;
    filter: alpha(opacity=90);
    height: 125px;
    width: 250px;
    z-index: 1;
}

<form id="form1" runat="server">
<div id="box"><div>
</form>

谢谢！我无法弄清楚如何在代码块中将html放在一边。这是水平和垂直的中心。

Answer 1

水平居中：

margin:auto;

垂直居中：

position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

即使滚动页面，您也可以使用position: fixed使div居中。

另请注意，您必须使用#代替.来选择 id 。 .是用于类的CSS选择器。

JsFiddle

Answer 2

使用position：absolute如果需要它可以水平和垂直居中：

#box {
    position:absolute; 
    top:0; left:0; right:0; bottom:0; 
    margin:auto;
    /* etc */
}

http://jsfiddle.net/wcFMw/

Answer 3

margin:0 auto;

将此属性添加到您的css类。

如何根据屏幕大小动态居中div的中心

3 个答案: