使用display:block垂直居中div元素时首个元素对齐异常求助

核心问题出在两点：

• display:block 本身不支持垂直居中，align-items 和 justify-content 是Flex布局专属属性，只有容器设置 display:flex 时才会生效。
• <h1> 标签默认自带上下左右的外边距（margin），这就是它出现左右偏移的直接原因。

修正方案 #

把容器改成Flex布局，同时清除h1的默认外边距即可解决：

修正后的CSS代码 #

.container {
  width: 100%;
  height: 300px;
  border: 1px solid #000;
  /* 改用flex实现垂直+水平居中 */
  display: flex;
  flex-direction: column; /* 让元素垂直排列 */
  justify-content: center; /* 垂直方向居中 */
  align-items: center; /* 水平方向居中 */
}

.container h1 {
  margin: 0; /* 清除h1默认的外边距 */
}

这样容器内的所有元素（包括h1）就能同时实现水平和垂直居中，不会再有偏移问题。

内容的提问来源于stack exchange，提问作者Last Clean Shirt