0

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

理想情况下，我希望有一个解决方案，无论我是尝试将内容集中在页面上的元素内还是在浏览器窗口本身内。

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

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

  • 使用纯 HTML + CSS（我看到有一些 JS 解决方案）

  • 不使用表格（或具有“显示：表格”等属性的 div）

  • 不依赖于固定居中元素的高度（我看到一些解决方案适用于固定高度+负上边距）

  • 将用于在另一个 div或整个浏览器窗口中居中元素

4

1 回答 1

0

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

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

...它采用了垂直对齐：中间和使用伪类:before创建的“幽灵元素”（垂直对齐工作所需） ，以避免非语义标记。

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
于 2013-03-28T02:11:26.077 回答