使用 CSS 在 BODY 中垂直居中 DIV

Vertically centering a DIV within BODY using CSS

本文关键字：垂直居中 DIV BODY CSS 使用      更新时间：2023-09-26

我已经阅读了至少五篇关于这个问题的stackoverflow文章;以及像这样和这样的文章。一定是可能的！

我的身体里有一个div，我想在我的页面上垂直居中。喜欢这个：

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

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

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

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

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>

或者这个使用显示：表

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>

尝试将position设置为 relative ，将text-align设置为 center ，top使用css vh单位来45或50，具体取决于div元素的height或line-height

div {
  position:relative;
  top:45vh;
  text-align:center;
}
<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

如果为div 指定固定高度，则可以使用绝对定位将其垂直居中。

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

边距顶部应该是你身高的一半。

如果您将未指定高度的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 的浏览器支持较少。

只需使用弹性框：

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，则需要一些前缀，对于 IE9 及更低版本，您将需要其他解决方案。实际上，今天 - 忽略IE10及更早版本，除非客户付钱给你不要。如今，人们实际上在升级。

现在有2种简单的方法：Flex 显示选项(HTML 和正文之间有 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>

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

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

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

要使转换在某些浏览器的旧版本上工作，您需要添加前缀(-moz- ，-ms- ，-o- ，-webkit-(，例如：-webkit-transform：translateY(-50%(等。

相关文章：