将div与页面中心对齐，而其位置是绝对的？

How can I align a DIV to the center of my page while its position is absolute? If possible without using javascript.

如何将DIV与页面中心对齐，而其位置是绝对的？如果可能，不使用javascript。

6 个解决方案

#1

You can do this if you know the width of the DIV you want to centre.

如果您知道要居中的DIV的宽度，则可以执行此操作。

CSS:

CSS：

div
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-top: -150px;
    margin-left: -200px;
}

You position the top left corner in the centre, and then use negative margins which are half of the width to centre it.

将左上角定位在中心，然后使用宽度的一半的负边距使其居中。

#2

position: absolute;
left: 50%;
transform: translateX(-50%);

#3

Try this:

尝试这个：

position: absolute;
width: 600px;
left: 50%
margin-left: -300px;

#4

It's not possible to get HTML to automatically center anything that is absolutely positioned. Heck, HTML barely centers anything horizontally using CSS margins :-)

不可能让HTML自动定位任何绝对定位的东西。哎呀，HTML几乎不使用CSS边距集中任何内容:-)

As the name implies absolute positioning is absolute where you get top and left fixed positions and any margins are applied relative to those positions. Auto is ignored with absolute positioning.

顾名思义绝对定位是绝对的，你可以获得顶部和左侧固定位置，并且相对于这些位置应用任何边距。绝对定位会忽略自动。

There are solutions using JavaScript and jQuery. Here's one that I wrote and use a lot:

有使用JavaScript和jQuery的解决方案。这是我写的并且经常使用的一个：

jQuery .centerInClient() plugin

jQuery .centerInClient（）插件

Hope this helps.

希望这可以帮助。

#5

The meaning of position: absolute is exactly that you want to specify how far from the margins of the page your div should be placed. Since you do not know the width of the screen a priori, there is no way to center it.

position：absolute的含义正是你要指定你的div应该放置在页面边缘的距离。由于您不是先验地知道屏幕的宽度，因此无法将其居中。

I guess you just want to remove the div from the page flow, while keeping it centered. In this case it may be enough to add a container div, like

我想你只是想从页面流中删除div，同时保持它居中。在这种情况下，添加容器div就足够了

<div id="external">
    <div id="internal">
    </div>
</div>

and the CSS

和CSS

#external {
    position: absolute
}

#internal {
    margin: 0 auto
}

I did not test the above layout, but I think it should work.

我没有测试上面的布局，但我认为它应该工作。

#6

Here's a simple method using percentages:

这是使用百分比的简单方法：

div {
    width: 80%;
    position: absolute;
    left: 10%;
}

Simply set your desired page width, and set the left margin as half of the remainder. In this case, the width is 80%, leaving 20%. Set left:to 10% and it will center the div on the page.

只需设置所需的页面宽度，并将左边距设置为余数的一半。在这种情况下，宽度为80％，留下20％。设置为左：10％，它将div放在页面上。

Using this method will allow the div to scale with different window sizes and screen resolutions as well.

使用此方法将允许div使用不同的窗口大小和屏幕分辨率进行缩放。

#1