html确定div大小位置,关于html：如何在100％宽度的div内水平放置绝对定位的元素？...

本问题已经有最佳答案，请猛点这里访问。

在下面的示例中，#logo的位置是绝对的，我需要将其水平放置在#header的中心。 通常，我会为相对定位的元素做一个margin:0 auto，但是我被困在这里。 有人可以给我指路吗？

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

的HTML

的CSS

#header {

background:black;

height:50px;

width:100%;

}

#logo {

background:red;

height:50px;

position:absolute;

width:50px

}

好问题...对齐发生了什么：居中;)...不要尝试，因为它行不通;)

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

@Desi margin自动工作，您需要正确使用它，请参阅我的示例

还要检查一下stackoverflow.com/a/21446727/567854

如果要在左属性上居中对齐。

对于顶部对齐，同样可以使用margin-top：(div的width / 2)，其概念与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

左：0；对：0;为我做了把戏。谢谢@Alessandro

重要说明，这很容易忘记，因此必须设置宽度才能使用

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

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

因此，在这种情况下：

#logo {

background:red;

height:50px;

position:absolute;

width:50px;

left: 0;

right: 0;

margin: 0 auto;

}

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

之所以起作用，是因为将left和right设置为零将水平拉伸绝对定位的元素。现在，当margin设置为auto时，魔术发生了。 margin占用了所有多余空间(在每一侧相等)，将内容保留为其指定的width。这导致内容变得居中对齐。

我喜欢这种方法比用边距补偿要好得多，因为它可以处理动态宽度。

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

将left和right设置为零将水平拉伸绝对定位的元素。现在，当margin设置为auto时，魔术发生了。 margin占用了所有多余空间(在每一侧相等)，将内容保留为其指定的width。这导致内容变得居中对齐。

@davidmdem它不会始终使用动态宽度(除非您添加子div)。考虑一个仅包含文本的div ...

答案中缺少calc的使用，这是一种更干净的解决方案。

#logo {

position: absolute;

left: calc(50% - 25px);

height: 50px;

width: 50px;

background: red;

}

在大多数现代浏览器中均可使用：http：//caniuse.com/calc

也许现在使用它而没有后退还为时过早，但是我认为也许对将来的访问者会有所帮助。

我认为Clac函数中的公式似乎与margin-left：-50px;作用相同。

diff是错误的：您必须减去元素宽度的一半...在这种情况下，应为：calc(50％-25px);

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

以我的经验，最好的方法是right:0;，left:0;和margin:0 auto。这样，如果div较宽，则left: 50%;不会对您造成干扰，因为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;

}

是的，我有时在这里也说过stackoverflow.com/a/16758185/1571437：D

谢谢，我更喜欢这种方法，因为允许您动态调整商品的尺寸，谢谢！

这是将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;

}

这很容易，只需将其包装在相对的盒子中，如下所示：

LOGO

相对框的边距为：0自动；

重要的是宽度

哇，太好了！ Cant相信有很多方法可以使绝对定位的div居中，但是这绝对比设置负边距和任何宽度都好！