Question

我正在CMS中建立一个网站。有许多元素需要垂直居中的内容。但是，由于我没有最终内容（以及将来可以改变的内容），我无法为这些容器设置固定的高度。

我花了好几分钟试图弄清楚为什么我的元素不会使用flexbox垂直对齐......直到我发现它缺乏固定的高度。

过去我使用display：table / table-cell组合构建了这样的布局。我最近开始越来越多地使用flexbox模型，并且真的开始喜欢这些并宁愿停止使用table / table-cell。

现在我想知道如果（或者如果）我可以使用flexbox垂直对齐内容，无论容器的高度如何。

Answer 1

如果您的Flex容器为flex-direction: row（默认方向），则可以使用垂直居中的内容：

align-items: center; /* for a single line of flex items */
align-content: center; /* for multiple lines of flex items */

如果您的Flex容器为flex-direction: column，则可以使用以下内容垂直居中：

justify-content: center;

这些方法无需定义任何高度即可工作。

有关详情，插图和现场演示，请参阅我的答案：https://stackoverflow.com/a/33049198/3597276

从那个答案：

以下是两个一般的定心解决方案。一个用于垂直对齐的flex项（flex-direction: column），另一个用于水平对齐的flex项（flex-direction: row）。在这两种情况下，居中div的高度可以是变量，未定义，未知，等等。中心div的高度并不重要。

Answer 2

我可以建议你同时使用这两个，因为那里仍然有一些IE8 / 9用户，这个后备变体也会让它适用于它们。

对于需要前缀或使用旧版flexbox模型的其他旧浏览器版本（如IE10，Safari8 / 7/6以及某些移动版本，如Android，Blackberry，UC浏览器），桌面版本即可开始使用。{{3 }}

html, body {
  margin: 0;
  height: 100%;
}
.parent {
  display: table;
  display: flex;
  justify-content: center;
  
  /* for this demo */
  width: 50%;
  height: 50%;
  border: 1px solid black;
}

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  display: flex;
  align-items: center;
}

<div class="parent">
  <div class="child">Centered<br>content</div>
</div>

Answer 3

要垂直居中内容（或完全居中），您可以使用带有api/events?userId=<user_id>属性的CSS transform。使用该方法，您不需要知道元素的大小，并与相对父级组合，您可以获得完美的垂直中心或水平中心。请参阅代码段：

translate

.relative {
  position: relative;
  width: 400px;
  height: 300px;
  background-color:yellow;
  border: 1px solid black;
  margin: 20px 0;
}

.relative .center {
  position: absolute;
  background-color: black;
  color: white;
  width: 120px;
  height: 150px;
}

.relative .center.vertical {
  top: 50%;
  -ms-transform: translateY(-50%); /* ie9/ie10 */
  -webkit-transform: translateY(-50%); /* safari ios */
  transform: translateY(-50%); /* standard */
}
.relative .center.horizontal {
  left: 50%;
  -ms-transform: translateX(-50%); 
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); 
}
.relative .center.total {
  top: 50%;
  left:50%;
  -ms-transform: translate(-50%, -50%); 
  -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%);
}

垂直对齐：Flexbox VS表/表单元格，高度未知的元素

3 个答案: