将div定位在中心css中

Question

我正在尝试添加div块，以便它位于屏幕的中心。我只有一个固定的背景图像，它正在做一些奇怪的事情。

CSS：

body {               
    margin:0;
    padding:0;
}

#middle {       <--- the white div block
    background-color:#FFF;
    display:block;
    width:750px;
    height:750px;
    margin:0 auto 0 auto;
    margin-top:15px;
    position:relative;
    overflow:hidden;
}

#bigbg {                <-- background image
    height:auto;
    width:100%;
    z-index:-100;
    min-height:100%;
    min-width:100%;
    margin-left:0%;
    position:fixed;
    margin-top:0px;
}

html：

<div id='middle'>
</div>
<img src="images/backgroundmain.jpg" id="bigbg">

看起来像这样：

我希望白色div块在中间居中。是否有更好的应用背景图像的方法？通过将background-image:url属性添加到html，我能够实现我想要的，但是我无法添加我想要的所有属性，例如固定边距/宽度等。

Answer 1

将margin:0 auto 0 auto;更改为中产阶级的margin:0px auto;

Answer 2

将你的CSS升级到下面

body {               
margin:0;
padding:0;
width=100%;
}

#middle {       <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:15px auto 0 auto;
position:relative;
overflow:hidden;
}

#bigbg {                <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}

Answer 3

到'中'div添加margin-left: auto; margin-right: auto;

或者你可以这样做：

body {
width: 100%; <---make sure you use percentages
height: 100% <---          
margin:0;
padding:0;
}

#middle {       
background-color:#FFF;
display:block;
width:25%; <--change the width and height to % also
height:25%; <---
left: 37.5%; <--since your div is 25% wide you want to move 
<--- it 37% to the right to center it. (100% - 25% = 75% / 2 = 37.5%)
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}

#bigbg {                <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}

但是，如果您保持代码相同，我建议您只需将margin:0 auto 0 auto;切换为margin-left: auto; margin-right: auto;