html - 需要帮助 CSS 以绝对定位居中

标签 html css css-position

我对在网页中居中内容的各种解决方案从未完全满意。 <center> tag 在 18 世纪中叶就被弃用了,但我没有看到一个合理的替代方案。具体来说,我想要的是有一个居中的父 DIV,但是我可以在其左上角“绝对”地设置东西。

有没有一种方法可以在不使用重新测量所有内容的 window.onresize javascript 的情况下完成此操作?这似乎是一个相当直接的想法...我想要绝对定位的东西,我只希望 0,0 坐标相对于浏览器窗口左上角以外的其他东西。

现在,我所做的是设置一个 div 使其内容居中,然后使用相对定位进行调整,但这非常令人厌烦,因为相对对象不断以我完全不希望的方式相互插入。

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

最佳答案

body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }

只是示例代码,但任何 .child 元素都将位于包装器的 0,0

任何绝对定位的元素都将绝对定位到它最近的位置相对父元素。如果一个元素没有相对位置的父元素,它只使用文档。下面是一个没有类的示例(为清楚起见添加了一些颜色和宽度样式)。

<html>
    <body style="text-align: center;">
        <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
            <div style="position: absolute; left: 0; top: 0;">
                This will absolutely position relative to the container div.
            </div>
        </div>
        <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
            This will absolutely position relative to the document
        </div>
    </body>
</html>

关于html - 需要帮助 CSS 以绝对定位居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1034449/

相关文章:

css - 应用特定于屏幕分辨率的 css 样式

html - 在另一个 div 上更改 css 不工作,因为它不在同一个元素中

html - YouTube/Vimeos 能否调整其高度以适应宽度 (CSS)?

javascript - 使用 jQuery 检测 CSS 文本溢出省略号

html - 将我的元素切换为 "position: absolute"可防止它占用全宽

从一个边缘到另一个边缘的 CSS 过渡位置绝对

javascript - 固定背景图像水平连接到固定宽度的内容

javascript - 单击 Morris 饼图段时显示模态

javascript - 如何在 Javascript 源数据中使用(添加)行创建回调

html - 元名称 ="og:title"VS 元属性 ="og:title"?