HTML中心是一个灵活的布局

我使用这个例子作为一个简单站点的基础

这工作得很好，但我希望布局坐在页面的中心，而不是全高。请参见示例图像

是否有办法做到这一点并保持页面的灵活性

我试着给包裹增加高度或最大高度，但没有任何区别

谢谢

因此，您希望使用align items:center；。但你必须选择在哪里使用它。如果希望侧边栏保持原样，则应稍微更改html代码：

<div class="content">
   <div class="inner">
      Actual content goes here.
   </div>
</div>

现在黄色背景将保持原样，但文本将垂直居中

如果你把显示器：flex；并论证内容：中心；侧边栏和内容都将居中。然后它会像这样：

html:

编辑： 由于我误解了这个问题，我将在这里回答，但我将保留上面的部分，因为有人可能会发现它有用

因此，您需要修改.wrap的样式。因为你有灵活的方向：列；设置，要垂直居中，必须使用“对齐内容：居中”；而不是对齐项目：居中，因为现在主轴是垂直轴。因此：

.wrap {
    display: flex;
    ...
    justify-content: center;
}
.main {
    max-height: 500px; /* set whatever you want */
    ...
}

使用“对齐项目”属性解决此问题

.main {
    flex: 1;
    display:flex;
    align-items:center;
}

---

anwser已经提出了一些关于如何垂直居中分割或元素的问题：-什么不适合你？垂直中心的灵活性是一个宽泛的术语。在任何情况下，responivness都不会受到居中元素的影响。试着看一下：这也会使侧边栏居中，我认为这不是他想要的。他在谈论整个页面的同时，也在谈论高度和最大高度。所以唯一合乎逻辑的结论是，他试图将整个元素垂直居中。@tacoshy-更正我想居中的整个页面。我该怎么做？@Rocket您的问题下面有两条评论，并有解决方案的链接。特别是最后一个将能够帮助你很容易他不是谈论侧边栏，而是整个页面，而谈论高度和最大高度。所以唯一合乎逻辑的结论是，他试图将整个元素垂直居中。好的，我会编辑我的答案。我想居中的是整个页面，而不是其中的内容。代码笔显示的页面占据了整个屏幕的高度，我的图像就是我试图做的一个例子。Thxok，让我编辑我的答案。

.main {
    flex: 1;
    display:flex;
    align-items:center;
}

.wrap {
    display: flex;
    ...
    justify-content: center;
}
.main {
    max-height: 500px; /* set whatever you want */
    ...
}

.main {
    flex: 1;
    display:flex;
    align-items:center;
}