如何在 100% 宽度的 div 内水平居中绝对定位的元素？ [复制]

Posted 2023-03-05

【中文标题】如何在 100% 宽度的 div 内水平居中绝对定位的元素？ [复制]

【英文标题】：How do I horizontally center an absolute positioned element inside a 100% width div? [duplicate]

【发布时间】：2013-05-21 10:05:28

【问题描述】：

在下面的示例中，#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

【问题讨论】：

好问题... align: center 发生了什么 ;)... 不要尝试，因为它不起作用 ;)

嘿，您是否意识到，使用这样的 CSS，您将徽标定位在窗口中，而不是在标题中？

@Desi margin 自动工作，你需要正确使用它看我的例子

也检查一下，***.com/a/21446727/567854

【参考方案1】：

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

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

DEMO

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

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

DEMO2

【讨论】：

左：0；对：0；为我做了伎俩。谢谢@Alessandro

很容易忘记的重要注意事项，必须设置宽度才能这样工作

这也能解释一下吗？为什么 left/right:0 + margin-left/right:0 + 具有定义的宽度使这项工作有效？

【参考方案2】：

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

所以在这种情况下：

#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。这会导致内容居中对齐。

【讨论】：

我喜欢这个比用边距偏移要好得多，因为它适用于动态宽度。

你能解释一下，为什么会这样吗？？

将left 和right 设置为零将水平拉伸绝对定位的元素。现在，当margin 设置为auto 时，奇迹发生了。 margin 占用了所有额外的空间（每边相等），将内容留给它指定的 width。这会导致内容居中对齐。

@davidmdem 它并不总是适用于动态宽度（除非您添加子 div）。例如，考虑一个仅包含文本的 div...

【参考方案3】：

没有在答案中使用calc，这是一个更简洁的解决方案。

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

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

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

【讨论】：

我认为 Clac 函数中的公式，似乎与 margin-left:-50px; 相同；

差异是错误的：你必须减去元素宽度的一半......在这种情况下左：calc(50% - 25px);

你是对的。谢谢！现在更新了。

【参考方案4】：

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

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

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

【讨论】：

是的，我曾经在这里说过同样的话***.com/a/16758185/1571437：D

谢谢，我更喜欢这种方法，因为它允许您在项目上设置动态尺寸，问候！

【参考方案5】：

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

DEMO FIDDLE

代码--

#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】：

很简单，只需像这样将它包装在一个相对的盒子中：

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

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

【讨论】：

哇，太棒了！不敢相信有这么多方法可以使绝对定位的 div 居中，但是这绝对比设置负边距更好，并且也适用于任何宽度！