如何在屏幕上以水平和垂直方向居中显示未知大小的DIV

Question

我需要将DIV置于屏幕中央,水平和垂直,我不知道DIV的大小,div是position:fixed;.

这个负边距技巧不起作用,因为我不知道div大小. top:50%; left:50%; magin-top:-100; margin-left:-100;

这margin-left: auto; margin-right: auto;不起作用,因为不起作用position:fixed;,margin-top:auto; margin-bottom:auto;也没有垂直居中;

我发现这个方法:display: table-cell; vertical-align: middle;不工作以太;

我知道如何用JavaScript使用getComputedStyle获取div内容大小,并做数学来修复它的位置,但我想要一个纯CSS解决方案,因为我不希望每次我的div内容改变时都触发JS .

Answer 1

像这样的东西会起作用吗？它还使用display: table-cell但需要 2 个 div 标签才能工作...父标签具有display: table指定的样式。

\n\n

注意：我添加到z-index:-1;了 centerbase 类中。您可能想根据您的设计对此进行调整。

\n\n

<style>\n.centerbase{\n    display: table; \n    vertical-align: middle;\n    height:100%;\n    width:100%;\n    text-align:center;\n    position:fixed;\n    z-index:-1;\n}\n.centerpane{\n    display: table-cell; \n    vertical-align: middle;\n}\n</style>\n<div class="centerbase">\n    <div class="centerpane">\n        <img src="https://www.google.com/images/srpr/logo3w.png" />\n    </div>\n\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b</div>\n

\n\n

如果您需要添加未在中心窗格内居中对齐的文本，则可以在中心窗格内添加另一个 div 并指定样式，如下所示：text-align:left; width:400px; margin:0px auto;您必须指定此附加 div 的宽度。

\n