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

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

所以在这种情况下:

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

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

这是有效的,因为将left和设置right为零将水平拉伸绝对定位的元素。现在,当margin设置为时,魔法就会发生automargin占用所有额外空间(在每一侧均等),将内容留给指定的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 回答