Question

我正在寻找一种方法来将容器中的div垂直居中。我发现了一些不同的方法，但所有这些方式似乎非常＆＃34; hacky＆＃34;。

我的问题是，为什么不只有align-vertical这样的css属性可以简单地设置为center以使内容居中？似乎将此添加到css会使这么多事情变得更容易。

我认为必须有一个理由为什么没有实现这样的事情，我想听听是否有人知道为什么。

Answer 1

这是因为浏览器传统上如何运作。

在浏览器中，默认情况下，内容会垂直滚动。视口宽度定义良好（设备的宽度），但视口高度可以是设备高度的一倍或两倍，甚至可以是无限的（如无限滚动）。

传统上，块意味着水平定向。您放置了div，它会自动占据父级100%的{{1}}。但它的width值与其内容有关。

如果你这样做

height

没有任何变化，因为div已经有100％的宽度，并且它无法计算高度，因为它不知道视口将走多远。你需要添加：

.mydiv {
  background: red;
  width: 100%;
  height: 100%
}

告诉浏览器将设备高度用作100％值。

这就是为什么水平中心很容易：你知道边界是什么，以及如何使元素居中。但垂直中心更复杂，这就是为什么（在flexbox之前），你需要求助于绝对定位或黑客攻击。

Flexbox允许您水平或垂直渲染内容，因此它准备好处理沿两个轴的居中。

如果您想了解更多相关信息，请参阅规范：

Answer 2

＆＃13;

#outerDiv{
  display:flex;
  width:100%;
  height:200px;
  background:#ccc;
  align-items:center;
}
#innerDiv {
  background:#aaa;
  width:80%;
  margin:0 auto;
}

＆＃13;

<div id="outerDiv"><div id="innerDiv">Hello</h1></div>

＆＃13;

运行脚本，div保留在中心。
你可以混合搭配这样的组合。之前您需要使用父容器的高度和自身高度。
但随着弹性变得容易。

Answer 3

如果我试图将元素居中，我会执行以下操作 -

*parent-item {
  margin: 0 auto;
  width: 100%;
  display: block;

定义要居中的元素的宽度非常重要。

为什么在CSS中垂直居中并不容易？

3 个答案: