Question

我希望（在水平和垂直方向上）在另一个其他元素和/或浏览器窗口中的任何宽度/高度的中心。

无论我是尝试将内容集中在页面上的元素内还是浏览器窗口内，我都会喜欢这样的解决方案。

我意识到其他问题涉及到我试图做的各个方面，但到目前为止我读到的答案对我来说并不令人满意。

我正在寻找一个解决方案：

纯粹使用HTML + CSS （我看到有些JS解决方案）
不使用表（或带有“display：table”等属性的div）
不依赖于固定居中元素的高度（我看到一些解决方案适用于固定高度+负顶边距）
可以将元素置于另一个div 或整个浏览器窗口中的

Answer 1

我花了很长时间在网上搜索并亲自试验。最后，我偶然发现了这里记录的解决方案：

http://css-tricks.com/centering-in-the-unknown/

...使用 vertical-align：middle 和使用psuedo-class 创建的“ghost元素”（vertical-align工作所需）：之前以避免非语义标记。

<强> HTML：

<div class="wrapper">
    <div class="centered">
        This div will be centered.
    </div>
</div>

<强> CSS：

.wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
}

.wrapper:before {
    content: '';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
}

.centered {
    display: inline-block;
    vertical-align: middle;
    width: 650px;
}

要将上述内容集中在整个浏览器窗口中，需要以下CSS：

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

备注：

对于-IE7
，此解决方案无效
原始解决方案在ghost元素上使用 width：1px 和 margin-right：-0.25em 。我已替换为 width：0px

其他元素和/或浏览器窗口中未知高度的居中元素

我希望（在水平和垂直方向上）在另一个其他元素和/或浏览器窗口中的任何宽度/高度的中心。

1 个答案: