Html 如何在 100% 宽度的 div 内水平居中绝对定位元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16758102/
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 do I horizontally center an absolute positioned element inside a 100% width div?
提问by J82
In the example below, #logois positioned absolutely and I need it to be horizontally centered within #header. Normally, I would do a margin:0 autofor relatively positioned elements but I am stuck here. Can someone show me the way?
在下面的示例中，#logo绝对定位，我需要它在#header. 通常，我会margin:0 auto为相对定位的元素做一个，但我被困在这里。有人可以给我指路吗？
JS Fiddle: http://jsfiddle.net/DeTJH/
JS小提琴：http: //jsfiddle.net/DeTJH/
HTML
HTML
<div id="header">
<div id="logo"></div>
</div>
CSS
CSS
#header {
background:black;
height:50px;
width:100%;
}
#logo {
background:red;
height:50px;
position:absolute;
width:50px
}
回答by Alessandro Minoccheri
If you want to align center on left attribute.
The same thing is for top alignment, you could use margin-top: (width/2 of your div), the concept is the same of left attribute.
It's important to set header element to position:relative.
try this:
如果要在左属性上对齐中心。
顶部对齐也是如此，您可以使用 margin-top: (div 的宽度/ 2)，概念与左属性相同。
将标题元素设置为 position:relative 很重要。
尝试这个：
#logo {
background:red;
height:50px;
position:absolute;
width:50px;
left:50%;
margin-left:-25px;
}
If you would like to not use calculations you can do this:
如果您不想使用计算，您可以这样做：
#logo {
background:red;
width:50px;
height:50px;
position:absolute;
left: 0;
right: 0;
margin: 0 auto;
}
回答by Arjun
You will have to assign both leftand rightproperty 0value for margin: autoto center the logo.
您必须同时分配left和right属性0值margin: auto才能使徽标居中。
So in this case:
所以在这种情况下：
#logo {
background:red;
height:50px;
position:absolute;
width:50px;
left: 0;
right: 0;
margin: 0 auto;
}
You might also want to set position: relativefor #header.
您可能还想设置position: relative为#header.
This works because, setting leftand rightto zero will horizontally stretch the absolutely positioned element. Now magic happens when marginis set to auto. margintakes up all the extra space(equally on each side) leaving the content to its specified width. This results in content becoming center aligned.
这是有效的，因为将left和设置right为零将水平拉伸绝对定位的元素。现在，当margin设置为时就会发生奇迹auto。margin占用所有额外的空间（每边相等），将内容保留为其指定的width. 这会导致内容居中对齐。
回答by pzin
Was missing the use of calcin the answers, which is a cleaner solution.
缺少calc答案中的使用，这是一个更清洁的解决方案。
#logo {
position: absolute;
left: calc(50% - 25px);
height: 50px;
width: 50px;
background: red;
}
Works in most modern browsers: http://caniuse.com/calc
适用于大多数现代浏览器：http: //caniuse.com/calc
Maybe it's too soon to use it without a fallback, but I thought maybe for future visitors it would be helpful.
也许在没有后备的情况下使用它为时过早，但我认为这对未来的访问者可能会有所帮助。
回答by Kevin Lynch
In my experience, the best way is right:0;, left:0;and margin:0 auto. This way if the div is wide then you aren't hindered by the left: 50%;that will offset your div which results in adding negative margins etc.
根据我的经验，最好的方法是right:0;,left:0;和margin:0 auto。这样，如果 div 很宽，那么您就不会受到left: 50%;会抵消 div 的阻碍，这会导致添加负边距等。
DEMO http://jsfiddle.net/kevinPHPkevin/DeTJH/4/
演示http://jsfiddle.net/kevinPHPkevin/DeTJH/4/
#logo {
background:red;
height:50px;
position:absolute;
width:50px;
margin:0 auto;
right:0;
left:0;
}
回答by Rohit Agrawal
here is the best practiced method to center a div as position absolute
这是将 div 居中作为绝对位置的最佳实践方法
code --
代码 -
#header {
background:black;
height:90px;
width:100%;
position:relative; // you forgot this, this is very important
}
#logo {
background:red;
height:50px;
position:absolute;
width:50px;
margin: auto; // margin auto works just you need to put top left bottom right as 0
top:0;
bottom:0;
left:0;
right:0;
}
回答by user3849374
Its easy, just wrap it in a relative box like so:
很简单，只需将它包装在一个相关的盒子中，如下所示：
<div class="relative">
<div class="absolute">LOGO</div>
</div>
The relative box has a margin: 0 Auto; and, important, a width...
相对框有一个边距：0 Auto；而且，重要的是，宽度...
