如何实现图片旁的h1标题在页面中水平居中

你给logo设置float: left后，浮动元素会占据页面左侧空间，h1作为块级元素虽然会铺满整行宽度，但它内部的文本行盒会自动避开浮动元素的覆盖范围，最终text-align: center的效果是文本在logo右侧的剩余空间内居中，而非相对于整个页面宽度居中。

方案1：最小改动（无需调整HTML结构） #

将logo设置为绝对定位固定在左上角，让它完全脱离正常文档流，就不会挤占h1的布局空间，修改后的CSS如下：

#logo {
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
}

h1 {
  text-align: center;
  padding: 25px;
  font-size: 75px;
  margin: 0; /* 清除浏览器默认h1外边距，避免额外偏移 */
}

如果logo尺寸较大，担心h1文字和logo重叠，可以给body添加和logo高度匹配的上内边距，保证内容显示正常。

方案2：现代Grid布局实现 #

不需要用浮动和绝对定位，通过Grid的单元格叠加特性实现，布局更稳定：

body {
  margin: 0;
  display: grid;
}

#logo {
  grid-area: 1/1;
  padding: 20px;
  justify-self: start;
  align-self: start;
}

h1 {
  grid-area: 1/1;
  text-align: center;
  padding: 25px;
  font-size: 75px;
}

这种写法下logo和h1放置在同一个网格单元格内，logo固定靠左上，h1文本在整行宽度下居中，不会出现偏移。

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