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, #logo
is positioned absolutely and I need it to be horizontally centered within #header
. Normally, I would do a margin:0 auto
for 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 left
and right
property 0
value for margin: auto
to 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: relative
for #header
.
您可能还想设置position: relative
为#header
.
This works because, setting left
and right
to zero will horizontally stretch the absolutely positioned element. Now magic happens when margin
is set to auto
. margin
takes 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 calc
in 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;而且,重要的是,宽度...