如何在一个100%宽度的div中水平居中一个绝对位置的元素?(复制)

This question already has an answer here:

这个问题已经有了答案:

How to center absolutely positioned element in div? 25 answers
如何在div中居中绝对定位元素?25的答案

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中水平居中。通常，我会做一个空白:0自动为相对定位的元素，但我被困在这里。有人能给我带路吗?

JS Fiddle: http://jsfiddle.net/DeTJH/

JS小提琴:http://jsfiddle.net/DeTJH/

HTML

<div id="header">
    <div id="logo"></div>
</div>

CSS

#header {
    background:black;
    height:50px;
    width:100%;
}

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px
}

6 个解决方案

#1

262

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的width/2)，概念与left属性相同。将header元素设置为相对位置是很重要的。试试这个:

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

DEMO

演示

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;
}

DEMO2

以及接下来

#2

111

You will have to assign both left and right property 0 value for margin: auto to center the logo.

您将必须分配左和右属性0值为裕度:自动居中标志。

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.

您可能还需要设置位置:相对于#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.

这是可行的，因为将左和右设置为0将横向拉伸绝对定位元素。现在魔术发生时，保证金被设置为自动。页边距占用所有额外的空间(每边相等)，使内容保持其指定的宽度。这导致内容成为中心对齐。

#3

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.

也许现在使用它还为时过早，但我想也许对未来的游客会有帮助。

#4

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.

根据我的经验，最好的方法是右:0;左:0;汽车和保证金:0。这样的话，如果div是宽的，那么就不会受到左边的阻碍: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;
}

#5

here is the best practiced method to center a div as position absolute

这里有一种最佳的实践方法，可以将div设置为绝对位置

DEMO FIDDLE

演示小提琴

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;
}

#6

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自动;,重要的是,宽度……

#1

262

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}