Question

当我将父元素的position属性设置为relative并且将子元素的位置设置为absolute（子元素是我试图居中的元素）时，我正试图获得一致的中心交叉浏览器

目前在firefox中它并不完全是中心，但是ie6 / 7它是（我在下面使用的样本）

#wrapper { min-width:995px; position: relative; }
#wrapper2 { margin:0 auto; z-index: 0; position: absolute; }

Answer 1

你是想尝试横向中心，垂直中心还是两者兼而有之？

在任何一种情况下，使用保证金和绝对是不相容的。绝对位置使其脱离正常流量。如果取出绝对位置，则内部div正确地水平居中。

无论你想做什么，居中（尤其是垂直居中）都是纯CSS的一个大问题，特别是在需要IE6支持时。

如果你必须在内部div上使用绝对定位，你几乎需要依赖像素定位，这意味着要知道外部和内部div的固定大小（除了几个角落情况）。

Answer 2

如果您对jQuery方法感兴趣，几周前我使用了以下内容：

$(window).load(function() {
    $("ul.recent-list div img").each(function() {
        var moveX = ($(this).width() / 2 * -1) + 18;
        var moveY = ($(this).height() / 2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS
        $(this).css({'top' : moveY, 'left' : moveX});
    });
});

我必须拍摄一张未知尺寸的图像并将其放置在36x36像素的“窗口”内，以便通过窗口<div>只能看到图像的36平方px区域。

需要(window).load而不是(document).ready，因为如果在document.ready上的图像上没有定义宽度/高度属性，则Safari无法使用width（）和height（）函数。由于我的图像尺寸各不相同，我不得不使用window.load。

使用位置相对/绝对来居中元素的最佳技术？

2 个答案: