如何使用 CSS 在页面的顶部中心位置放置一个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11224069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place a div at top center position of a page using CSS?
提问by vips
I am not able to place a div at the top center of a page. I am using CSS for this but nothing works here.
我无法在页面的顶部中心放置 div。我为此使用 CSS，但这里没有任何效果。
#loader {
position: relative;
margin: 0 auto;
text-align: left;
clear: left;
height: auto;
z-index: 0;
}<body>
<div id="loader" style='display: none'><img src='img/basic/loader4.gif' /></div>
</body>I had already given 2 hours on this but still not able to figure it out.
我已经为此花了 2 个小时，但仍然无法弄清楚。
回答by SVS
First remove display:none;from your div with id=loader & add text-align:center;to it
首先display:none;使用 id=loader 从你的 div 中删除并添加text-align:center;到它
#loader{
position:relative;
margin:0 auto;
clear:left;
height:auto;
z-index: 0;
text-align:center;/* Add This*/
}?
Working demo:http://jsfiddle.net/surendraVsingh/FCEhD/
回答by Guffa
You need a specific width for the div, otherwise it will use all the available with, and the margin has no effect. Example:
您需要为 div 指定一个特定的宽度，否则它将使用所有可用的 with，并且边距无效。例子：
#loader{
margin: 0 auto;
width: 200px;
}
回答by Simon Dorociak
You have to specify widthproperty if you want to use margin: 0 auto;.
If you don't know width just add display: tableproperty and it will works.
你必须指定width，如果你想使用属性margin: 0 auto;。
如果您不知道宽度，只需添加display: table属性即可。
#out {
display: table;
margin: 0 auto;
}
回答by Jay Lepore
In the above example everyone is assuming he wants 'full width'.
在上面的例子中，每个人都假设他想要“全宽”。
This works within an absolute full width / height parent container but constraints the width automatically to only the content width
这适用于绝对全宽/高度父容器，但自动将宽度限制为仅内容宽度
Parent Container
父容器
display: block;
position: absolute;
clear: both;
width: 100%;
height: 100%;
border: solid thin red;
Child Container
子容器
display: block;
position: absolute;
top:0;
transform: translateX(50%);
padding-left:.5em;
padding-right:.5em;
margin-left:auto;
margin-right:auto;
right:50%;
回答by hamed aj
#loader{display:none;clear:both;margin:0px auto;width:[a number]px;}
of course you should also note the browser cache. clear cache of your browser and test again
当然你也应该注意浏览器缓存。清除浏览器缓存并再次测试
回答by Amith
<div id="loader" style='display: none' align="center">
<div id="loader" style='display: none' align="center">
press ctrl+space am not sure about the syntax and in css margin and padding has to set 0
按 ctrl+space 不确定语法，在 css 中边距和填充必须设置为 0
回答by Prashobh
#loader
{
position: absolute;
width: xxpx;
height: xxpx;
margin:0px auto ;
}
or u can use
或者你可以使用
margin-left:xx; and `margin-top:0px;`
回答by slash197
#loader{
margin: 0px auto;
width: 100px;
}
