Question

我已经阅读了很多关于如何在页面上居中元素或div的提示，但似乎都没有。我甚至做了一个JSFiddle来尝试一下：

我确信这一定是一个简单的答案，但我无法弄明白。任何帮助将不胜感激。

<body>
  <div class="intro-area">
    <div class="intro-text">
      <p>This is a paragraph I want to center on the page.</p>
      <p>This is another paragraph I want to center on the page.</p>
    </div>
  </div>
</body>

.intro-area {
  background-color: #e7e7e7;
  display: table;
  text-align: center;
}

.intro-text {
  display: table-cell;
  vertical-align: middle;
}

另外，在JSFiddle中，我通过javascript中的window.height函数动态地拉动.intro-area div的高度。这就是它在我的项目中的使用方式。

Answer 1

对于这种特定情况，添加以下内容以强制html，body和包含div的高度为100％：

html, body, .intro-area {
    height: 100%;
}

以下内容从html和body中删除默认的填充和边距：

html, body {
    margin: 0;
    padding: 0;
}

使用此方法无需JavaScript。

<强> DEMO

如何将div垂直和水平对齐到页面中心

1 个答案: