161

在下面的示例中，#logo绝对定位，我需要它水平居中在#header. 通常，我会margin:0 auto为相对定位的元素做一个，但我被困在这里。有人能给我指路吗？

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

6 回答 6

298

如果要在左侧属性上对齐中心。
顶部对齐也是一样，你可以使用 margin-top: (width/2 of your div)，这个概念和 left 属性是一样的。
将标题元素设置为 position:relative 很重要。
试试这个：

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

演示

如果您不想使用计算，可以这样做：

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

演示2

于 2013-05-26T10:00:07.660 回答
135

您必须同时分配left和right属性0值margin: auto以使徽标居中。

所以在这种情况下：

#logo {
  background:red;
  height:50px;
  position:absolute;
  width:50px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

您可能还想设置position: relative为#header.

这是有效的，因为将left和设置right为零将水平拉伸绝对定位的元素。现在，当margin设置为时，魔法就会发生auto。margin占用所有额外空间（在每一侧均等），将内容留给指定的width. 这会导致内容居中对齐。

于 2013-05-26T10:09:18.630 回答
19

缺少calc答案中的使用，这是一个更清洁的解决方案。

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

jsFiddle

适用于大多数现代浏览器：http ://caniuse.com/calc

也许在没有后备的情况下使用它还为时过早，但我想也许对未来的访问者会有所帮助。

于 2013-05-26T11:04:07.540 回答
7

根据我的经验，最好的方法是right:0;和。这样，如果 div 很宽，那么您就不会受到将抵消您的 div 从而导致添加负边距等的阻碍。left:0;margin:0 autoleft: 50%;

演示http://jsfiddle.net/kevinPHPkevin/DeTJH/4/

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    margin:0 auto;
    right:0;
    left:0;
}
于 2013-05-26T10:16:30.500 回答
4

这是将 div 居中为绝对位置的最佳实践方法

演示小提琴

代码 - 

#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;
}
于 2013-05-26T10:18:02.067 回答
2

它很简单，只需将其包装在一个相对的盒子中，如下所示：

<div class="relative">
 <div class="absolute">LOGO</div>
</div>

相对框有一个边距：0 Auto；而且，重要的是，宽度...

于 2014-07-17T13:31:42.090 回答