需要帮助CSS定中心与绝对定位 [英] need help CSS centering with absolute positioning

问题描述

我从来没有完全满意我的各种解决方案来定位网页中的内容。 < center> 标签在18世纪中期已经废弃，但我没有看到一个合理的选择。具体来说，我想要的是有一个父DIV的中心，但对他的左上角我可以设置的东西绝对。

I've never been totally satisfied with my various solutions to centering content in a web page. the <center> tag has been deprecated back in the middle of the 18th century, but I fail to see a reasonable alternative. Specifically what I want is to have a parent DIV that is centered, but against whose upper left hand corner I can set things "absolutely".

有没有办法实现这一点，而不使用window.onresize javascript重新测量一切？这似乎是一个相当直接的想法...我想要的东西绝对定位，我只是希望0,0坐标是相对于浏览器窗口的左上角以外的东西。

Is there a way to accomplish this without using window.onresize javascript that remeasures everything? It seems like a fairly straight forward idea... I want things absolutely positioned, I just want the 0,0 coordinate to be relative to something other than the top left corner of the browser window.

现在，我做的是设置一个div以使它的内容居中，然后面对相对定位的面条，但是这是非常令人讨厌的，因为相对对象不断推动对方的方式，我完全不想要的。

Right now, what I do is set a div to center its content and then noodle around with relative positioning, but that's very tiresome because relative objects keep pushing each other around in ways that I totally don't want.

任何和所有对此非常感激的想法。

Any and all thoughts on this greatly appreciated.

推荐答案

这是您要找什么？

<div style=" position: absolute;
             display: inline-block;
             top: 20%;
             bottom: 20%;
             right: 20%;
             left: 20%;
             background-color: #434154;
             text-align: center;">
    <div style="display: inline-block;
                height: 100%;
                vertical-align: middle;"></div>
    <div style="position: relative;
                color: #FFFFFF;
                background-color: #546354;
                display: inline-block;
                vertical-align: middle;">
               THIS IS CENTERED WITHOUT SCRIPTING :D
    </div>
</div>

这篇关于需要帮助CSS定中心与绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！