我使用这个示例codepen 作为一个简单站点的基础。
这很好用，但我希望布局位于页面中心，而不是全高。请查看示例图片。
有没有办法做到这一点并保持页面的灵活性？
我尝试将 height 或 max-height 添加到包装中，但这并没有任何区别。
谢谢
【问题讨论】：
所以，您想使用align-items: center;。但是你必须选择在哪里使用它。如果您希望侧边栏保持原样，您应该稍微更改一下 html 代码：
<div class="content">
<div class="inner">
Actual content goes here.
</div>
</div>
在css中：
.content {
display: flex;
justify-content: center;
}
现在黄色背景将保持原样，但文本将垂直居中。
如果您将display: flex; 和justify-content: center; 放在.main 上，侧边栏和内容都会居中。然后它看起来像这样：
html:
<div class="content">
Actual content goes here.
</div>
和css：
.main {
flex: 1;
display:flex;
align-items:center;
}
编辑： 由于我误解了这个问题，我会在这里回答，但我会留下上面的部分，因为有人可能会觉得它有用。
因此，您需要修改 .wrap 的样式。由于您在其上设置了flex-direction: column;，因此要将其垂直居中，您必须使用justify-content: center; 而不是align-items: center，因为现在主轴是垂直轴。所以：
.wrap {
display: flex;
...
justify-content: center;
}
.main {
max-height: 500px; /* set whatever you want */
...
}
【讨论】：
height 和max-height 时不是在谈论侧边栏而是整个页面。所以唯一合乎逻辑的结论是，他试图将整个元素垂直居中。
使用align-items 属性解决这个问题
.main {
flex: 1;
display:flex;
align-items:center;
}
【讨论】：
height 和max-height 时正在谈论整个页面。所以唯一合乎逻辑的结论是，他试图将整个元素垂直居中。