我目前有这个设计。

正如你所看到的，大屏幕（Boostrap V5）在中心对齐，但我希望它能接触到身体的顶部。我试过使用边距、显示和对齐，但似乎无法解决。

以下是到目前为止的代码：

body {display: flex; 
 align-items: center;
 padding-top: 40px;
 padding-bottom: 40px;
 background-color: #f5f5f5;
  }

.jumbotron {
  padding: 2rem 1rem;
  margin: 0 auto;
  width: 100%;
  background-color: #e9ecef;
  border-radius: .3rem;
  }

如果我删除主体的align-items：center，则大屏幕在顶部对齐，但由于某种原因，其高度会增加到几乎占据整个主体。为什么会这样？我怎样才能保持大屏幕的大小，因为它出现在附加的图像中，但让它在最顶部对齐？

谢谢你们！

顺晟科技：

您可以删除align-items: center;在body上添加align-self: flex-start;到您的大屏幕。或者干脆不使用Display Flex，如果大屏幕是第一个项目，它将位于页面顶部。

<代码>正文{显示：Flex；填充-顶部：40px；填充-底部：40px；背景色：#F5F5F5；}.大屏幕{align-self：flex-start；填充：2rem 1rem；边距：0自动；宽度：100%；背景色：#e9ecef；边界半径：.3rem；}