使用 CSS 在 BODY 中垂直居中 DIV答案

【问题标题】：Vertically centering a DIV within BODY using CSS使用 CSS 在 BODY 中垂直居中 DIV
【发布时间】：2016-03-06 02:12:11
【问题描述】：

我已经阅读了至少五篇关于这个问题的 stackoverflow 文章；以及文章like this and this。一定有可能！

我的正文中有一个 div，我希望它垂直居中在我的页面上。像这样：

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

上面的第二篇文章演示了它的解决方案，但他们的示例是其他 div 中的 div，这对于您希望在 body 中居中的 div 不起作用。我曾尝试在 div 中包含一个 div 并将高度设置为 100%，但这只会惹恼我的浏览器。

请帮忙！我不想求助于 JQuery！

【问题讨论】：

stackoverflow.com/questions/12771982/… 和 stackoverflow.com/questions/396145/…
感谢@Mohamed-Yousef，第一个成功了。可惜我无法将您的答案标记为解决方案。
我希望如此 :) :) .. 祝你好运 :-)

标签： javascript jquery html css

【解决方案1】：

尝试将position设置为relative，将text-align设置为center，top使用cssvh单位为45或50，具体取决于@987654 @ 的div 元素

div {
  position:relative;
  top:45vh;
  text-align:center;
}

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

【讨论】：

【解决方案2】：

如果你给 div 一个固定的高度，那么你可以使用绝对定位将它垂直居中。

div {
    height:100px;
    position:absolute;
    top:50%;
    margin-top:-50px;
}

margin-top 应该是你身高的一半。

如果您将未指定高度的 div 包装在另一个 div 中，您也可以垂直居中：

<div id="outer">
    <div id="inner">Some text here...</div>
</div>

#outer {
    height:100%;
    display:table;
}
#inner {
    display:table-cell;
    vertical-align:middle;
}

但是，display:table 和 display:table-cell 对浏览器的支持较少。

【讨论】：

【解决方案3】：

只需使用弹性框：

body {
  display:flex;
  height:100vh;
  align-items:center;
  justify-content:center;
}
div {
  width:125px;
  border:1px solid black;
}

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

如果您打算支持 IE10，您将需要一些 prefixing，对于 IE9 及以下您将需要其他解决方案。实际上今天说 - 除非客户付钱给您，否则请忽略 IE10 和更早版本。这些天人们实际上在升级。

【讨论】：

【解决方案4】：

将是使用绝对定位的可能解决方案之一：

html, body {
  height: 100%;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<body>
  <div class="center">I would like this to appear in the middle of the viewport.</div>
</body>

或者这个使用 display: table

html,
body {
  height: 100%;
}
.container {
  height: 100%;
  width: 100%;
  display: table;
}
.wrapper {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
}

<body>
  <div class="container">
    <div class="wrapper">
      I would like this to appear in the middle of the viewport.
    </div>
  </div>
</body>

【讨论】：

【解决方案5】：

现在有两种简单的方法： flex 显示选项（html & body 之间的 3 行代码）：

html {
  min-height:100%;
  display:flex;
  }
body {
  margin:auto;
  }
/* show me where it stands */
html {
  background:linear-gradient(to left, rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top, rgba(0,0,0,0.25) 50%, transparent 50%);
  }
div {
  border:solid;
  }

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

或表格显示（此处包括IE8）：

html {
  height:100%;
  width:100%;
  table-layout:fixed; /*if  to avoy spreading over the 100% width */
  display:table;
  }
body {display:table-cell;
  vertical-align:middle;
  text-align:center;
  }
div {
  display:inline-block;
  }
/* show me where it stands */
html {
  background:linear-gradient(to left, rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top, rgba(0,0,0,0.25) 50%, transparent 50%);
  }
div {
  border:solid;
  }

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

【讨论】：

【解决方案6】：

@serlingpa 如果你的身体里只有一个你想要垂直居中的 div，那么我有解决方案：

div {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

这可以在这个 jsfiddle 看到：http://jsfiddle.net/Rwthwyn/1bo7rx2q/

要在某些旧版本的浏览器上进行转换，您需要添加前缀（-moz-、-ms-、-o-、-webkit-），例如：-webkit-transform: translateY(-50 %) 等。

【讨论】：