如何在HTML/CSS中实现header容器顶部水平居中显示？

问题出在哪 #

你给.container加了display: flex，默认是横向布局，再配上justify-content: space-between，就把header挤到左侧和其他内容横向排开了。要让header顶在容器最上方且居中，只需要调整flex的方向，再给header内部做居中处理就行，原有样式都能保留。

修改后的CSS代码 #

.container {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  flex-direction: column; /* 把横向布局改成垂直，header自然跑到顶部 */
  width: 100%; /* 保留原有宽度设置 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.header {
  padding: 20px;
  border: 2px solid #dbdbdb;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex; /* 让内部的h3横向排列 */
  justify-content: center; /* 把h3整体水平居中 */
  gap: 20px; /* 可选：给几个h3之间加间距，看起来更舒服 */
}

可选调整 #

如果你想让header里的三个h3垂直排列，把.header的样式改成下面这样就行：

.header {
  padding: 20px;
  border: 2px solid #dbdbdb;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column; /* 垂直排列h3 */
  align-items: center; /* 水平居中每个h3 */
  gap: 10px; /* 垂直方向的间距 */
}

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