如何不使用flexbox通过CSS实现div内多个元素的垂直居中？

解决方案 #

你可以利用当前banner固定高度的特性，通过边距和行高配置实现垂直居中，完全不需要用到flex，修改后的代码如下：

调整后CSS代码

.banner {
  background-color: gray;
  width: 100%;
  height: 80px;
  /* 可选：清除浮动影响，避免后续布局偏移，固定高度场景下也可以省略 */
  overflow: hidden;
}

.banner img {
  float: left;
  width: 40px;
  height: 40px;
  /* 上下边距设为(容器高度-元素高度)/2=20px，实现垂直居中 */
  margin: 20px 10px 20px 0;
}

.banner h1 {
  float: left;
  /* 清除h1默认自带的上下外边距，避免位置偏移 */
  margin: 0;
  /* 行高等于容器高度，直接实现文字垂直居中 */
  line-height: 80px;
  /* 可选：调整字体大小适配banner高度，避免文字溢出 */
  font-size: 24px;
}

.banner button {
  float: right;
  width: 80px;
  height: 40px;
  /* 和图片逻辑一致，上外边距20px实现居中 */
  margin: 20px 0 20px 10px;
}

HTML代码无需修改，和原有结构完全兼容：

<div class="banner">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"/>
  <h1>Title</h1>
  <button>Button 2</button>
  <button>Button 1</button>
</div>

实现说明 #

• 本方案完全保留了你原有浮动布局的逻辑，不需要修改DOM结构，兼容性远高于flex，适配所有主流浏览器包括旧版IE
• 由于当前banner已设置固定80px高度，所有子元素高度均为40px，给非文本元素设置上下相等的20px边距、给文本元素设置等于容器高度的行高，即可实现所有元素的垂直居中效果
• 保留了logo、标题左对齐，按钮右对齐的布局要求，不需要额外加嵌套容器

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