javascript - 如何垂直和水平对齐一个div到页面中心

<分区>

我已经阅读了很多关于如何在页面上居中元素或 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 的高度。这就是它在我的元素中的使用方式。

最佳答案

对于这种特定情况，添加以下内容以强制 html、正文和包含的 div 的高度为 100%:

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

以及以下内容以从 html 和正文中删除默认的填充和边距:

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

使用此方法不需要 JavaScript。

DEMO

关于javascript - 如何垂直和水平对齐一个div到页面中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21268865/

上一篇：html - Bootstrap 响应时居中对齐社交图标 div

下一篇：html - 无法将提交按钮放在底部。它在旁边，通过评论框而不是下面的评论框

javascript - 在数组中创建一个对象的多个实例

css - 再次单击时如何关闭 Accordion 菜单

css - 使用边距 :0 auto; not effective 将固定宽度的 div 与 CSS 居中

html - 无法使用 Bootstrap 将 HTML 文本部分居中以适应不同的屏幕尺寸

html - Canvas 图像 : center wide image and hide overflow

javascript - jQuery Datepicker - 在悬停时获取日期

javascript - 在 FireFox 和 IE 8 中打印横向或纵向

JavaScript:如何用 a-j 替换 0-9

html - 如何在没有 Javascript 的情况下在 HTML/CSS 中实现位于内容背景后面的多 block 页面背景？