将div置于页面中心
[英]Getting div to center on page
问题描述
I need the div to be in the center of the page at all times whether user resizes webpage or not. 
无论用户是否调整网页大小，我都需要div始终位于页面的中心。
I have tried using: margin: auto; 我试过使用：margin：auto; margin: 0 auto; 保证金：0自动; margin-left: auto; 左边距：自动； margin-right auto; 边距自动；
but neither of those three worked. 但是这三个都不起作用。
HTML: HTML：
<div id="grayinnerbackground">
</div>
CSS: CSS：
div#grayinnerbackground {
margin: auto;
width:1000px;
background-color: #D9D9D9;
height: 100%;
position: fixed;
z-index: -1;
}
Here is a fiddle for an example of what I'm talking about. 这是我正在谈论的例子的小提琴。 http://jsfiddle.net/ymvDJ/ http://jsfiddle.net/ymvDJ/
Thanks. 谢谢。
6 个解决方案
解决方案1
1
If you do want the position to be fixed, add these rules and drop the usual margin trick: 如果您确实希望固定头寸，请添加以下规则并放下通常的保证金技巧：
left: 50%;
margin-left: -25px; // half the width of your element
See it here: http://jsfiddle.net/8DfnG/2/ 在这里查看： http : //jsfiddle.net/8DfnG/2/
解决方案2
0 2013-08-18 00:56:58
Remove position: fixed , change the width to 50px and make sure you have a 0 before auto in margin: auto . 移除position: fixed ，将width更改为50px ，并确保在auto之前留有0 margin: auto 。
Update: 更新：
To have the div be as high as the window, be sure to set the body and html to height: 100%; 要使div与窗口一样高，请确保将body和html设置为height: 100%; too: 太：
body, html {
height: 100%:
}
解决方案3
0 2013-08-18 00:59:10
This this HTML: 这个HTML：
<div id="grayinnerbackground">
foo
</div>
CSS: CSS：
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 100%;
}
I'm not entirely sure why it didn't work until I put text into the div, checking something now. 我不完全确定为什么直到我将文本放入div并检查当前内容后它才起作用。
UPDATE UPDATE
Sigh, ok, i'm tired. igh，好，我累了。 If the div is empty, and you have a height of 100%, it is going to be 100% the height of its parent, the <body> in this case. 如果div为空，并且高度为100％，则它将为其父级（在这种情况下为<body>的高度为100％。 Since there is no other content, the <body> has a height of 0. Give the <div> an absolute height, and it will pop in: 由于没有其他内容，因此<body>的高度为0。给<div>一个绝对高度，它将弹出：
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 10px;
}
解决方案4
0 已采纳 2013-08-18 01:00:39
You can use 您可以使用
position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width ÷ 2 */
Demo : http://jsfiddle.net/ymvDJ/3/ 演示 ： http : //jsfiddle.net/ymvDJ/3/
解决方案5
0 2013-08-18 01:02:36
Use: 采用：
position: relative
If that still doesn't work you may need to add this as well: 如果仍然无法解决问题，您可能还需要添加以下内容：
display: block;
"position: fixed" means that no matter what it stays at ax and y coordinate. “位置：固定”表示无论它保持在ax和y坐标上。
解决方案6
0 2013-08-18 01:03:54
You can try this 你可以试试这个
div#grayinnerbackground {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 50px;
background-color: #D9D9D9;
height: 100%;
}
http://jsfiddle.net/g49Mb/ http://jsfiddle.net/g49Mb/
More about the working here: http://codepen.io/shshaw/full/gEiDt 有关此处工作的更多信息： http : //codepen.io/shshaw/full/gEiDt
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.