Question

div是50％不透明的，显示在网站的内容之上，它的固定宽度为960像素（由jQuery创建）。

如何将其水平居中？

margin: 0 auto;不起作用：（

Answer 1

margin: 0 auto;不适用于绝对定位的元素。相反，我们可以使用元素本身的属性。看看小提琴......

http://jsfiddle.net/UnsungHero97/HnzyT/2/

水平居中很容易，因为你知道它的位置绝对是宽度 AND 。您所要做的就是给它2个CSS属性：

width: 960px;
position: absolute;

/* ... other CSS properties... */

left: 50%; /* 1. move it to the right 50% of the width of the page; now the left side of the element is exactly in the middle */
margin-left: -480px; /* move the element to the left exactly half of its width and now the center of the element is centered horizontally */

如果你想垂直和水平居中，你需要知道元素的宽度 AND 。

我希望这会有所帮助赫里斯托斯

Answer 2

从调整大小的元素宽度的一半中减去窗口中点。这是一个简单的插件，如果需要，您可以轻松地容纳垂直居中：

$.fn.centerMe = function () {
    this.css('left', $(window).width()/2 - $(this).width()/2);
};

$(window).resize(function() { $('#yourElem').centerMe(); });

$('#yourElem').centerMe();

See working example →

css / jQuery - 中心绝对定位div

2 个答案: