从网页中心绝对定位的 div 定位答案

【问题标题】：Absolutely positioned div positioning from the center of web page从网页中心绝对定位的 div 定位
【发布时间】：2013-12-25 21:29:51
【问题描述】：

我有一个site，顶部有一个绝对定位的徽标 div。它的父级是 100% 宽度的相对 div。

我设法得到了我的位置：absolute div 我想要的下一个代码：

css:

position:absolute; 
top:0; 
left:50%;
margin-left:-455px; 
background:url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png'); 
width:206px;
height:99px;
z-index:999;

但是我遇到了问题：当浏览器窗口宽度小于站点宽度时，徽标开始向屏幕左侧移动。

我的问题：

我如何绝对定位与网站页面中心相关的 div，换句话说，我需要将我的徽标放置在距离网站中间 X px 的位置......

【问题讨论】：

标签： css position css-position center absolute

【解决方案1】：

您网站上#headlogo 元素的父元素是#wrapper，它不是相对定位的。

因此你应该添加

#wrapper{
    position: relative;
}

或者把#headlogo放在相对定位的#header元素里面。

【讨论】：

叹息，我确定包装器设置为相对，但我错了！ thx 指出来 - 它解决了我的问题 :) 将在 2 分钟内授予系统允许的时间

【解决方案2】：

我查看了您网站的链接。一种选择是，如果您将 .headlogo 放在 #header div 中（如下所示）：

<div id="header">
    <div class="headlogo"><a href="/"></a></div>
    <!-- rest of the #header content here -->
</div>

...然后将您的 css 更改为：

position: absolute;
top: 0;
left: 0;
margin-left: 25px;
background: url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width: 206px;
height: 99px;
z-index: 999;

因为您的#header div 为 position:relative，所以它内部的任何 position:absolute div 都将相对于它而不是 body。因此，当窗口大小减小时，它仍然是相对于标题，而不是正文。

【讨论】：

【解决方案3】：

您可以使用 jQuery 轻松完成。

$(function()
{
var logo_width = width of your logo;
var window_width = $(window).width();
$('#id_of_your_logo').css('left', window_width / 2 - logo width / 2);
}

应该没问题:)。

【讨论】：

thx，我更喜欢 css 解决方案，因为我的大多数项目都不使用 jquery

【解决方案4】：

需要上述更改（位置：相对；在包装元素中）的原因是绝对定位仅在第一个父元素不是静态的（默认）时才起作用。如果它不是静态的，它应该可以正常工作！

【讨论】：