html 使用Flexbox垂直对齐内容

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用Flexbox垂直对齐内容相关的知识，希望对你有一定的参考价值。

.container{
  display: flex;
  align-items: center;
  height: 10em;
  background: #7396a1;
  width: 300px;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
}

<div class="container">
  <div class="content">I'm aligned vertically!</div>
</div>

以上是关于html 使用Flexbox垂直对齐内容的主要内容，如果未能解决你的问题，请参考以下文章

Flexbox垂直对齐溢出[重复]

在相邻的flexbox容器中垂直对齐内容

无法使flexbox垂直对齐元素

用于页眉、粘滞页脚和垂直对齐的中间内容的 CSS Flexbox 或 CSS 网格？

Flexbox - 如何使用 flex-col 垂直对齐项目？

使用flexbox垂直对齐td元素中的元素[重复]