如何在flex-grow:1的容器内实现垂直居中？附代码示例

没问题，这事儿其实很简单，只需要给你的.content容器启用flex布局，就能轻松实现.foo内容的垂直居中。我给你整理了完整的可运行代码，顺便拆解下思路：

完整代码 #

HTML部分

<div class="page">
  <div class="header"></div>
  <div class="content">
    <div class="foo">
      <div>I want to be center of content</div>
    </div>
  </div>
  <div class="footer"></div>
</div>

CSS部分

html, body {
  height: 100%;
}
body {
  margin: 0;
}
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  flex-shrink: 0;
  background-color: green;
  height: 50px;
}
.content {
  flex-grow: 1;
  /* 核心：把content变成flex容器 */
  display: flex;
  align-items: center; /* 垂直居中 */
  /* 如果需要水平居中，再加下面这行 */
  /* justify-content: center; */
}
.footer {
  flex-shrink: 0; /* 和header一致，防止被压缩 */
  background-color: gray;
  height: 50px;
}

原理说明 #

• 你的.page已经是垂直方向的flex容器了，.content通过flex-grow:1占据了页面的剩余空间，但它本身还不是flex容器，所以没法直接让内部元素居中。
• 给.content加上display: flex后，它就变成了flex容器，此时用align-items: center就能让它的直接子元素（也就是.foo）在垂直方向上居中。
• 另外补充了.footer的flex-shrink:0，和.header保持一致，这样即使页面内容过多，页脚也不会被压缩变形。

如果需要让内容同时水平居中，只需要给.content再加一行justify-content: center就行，非常灵活。

内容的提问来源于stack exchange，提问作者rrag