Html 将 div 对齐到页面中心，而其位置是绝对的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5132323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning a div to center of page while its position is absolute?
提问by Yunus Eren Güzel
How can I aligna DIVto the center of my page while its positionis absolute? If possible withoutusing javascript.
我怎么能align一个DIV到我的网页的中心，而它position是absolute？如果可能，不使用 javascript。
回答by Gareth
You cando this if you know the width of the DIVyou 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.
您将左上角定位在中心，然后使用一半宽度的负边距将其居中。
回答by muninn9
position: absolute;
left: 50%;
transform: translateX(-50%);
回答by icc
Try this:
尝试这个：
position: absolute;
width: 600px;
left: 50%
margin-left: -300px;
回答by Rick Strahl
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
Hope this helps.
希望这可以帮助。
回答by Andrea
The meaning of position: absoluteis 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.
我没有测试上述布局，但我认为它应该可以工作。
回答by levelonehuman
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 widthis 80%, leaving 20%. Set left:to 10% and it will center the div on the page.
只需设置所需的页面宽度，并将左边距设置为剩余部分的一半。在这种情况下，width是 80%，剩下 20%。设置left:为 10%，它将使页面上的 div 居中。
Using this method will allow the div to scale with different window sizes and screen resolutions as well.
使用此方法将允许 div 以不同的窗口大小和屏幕分辨率进行缩放。
