如何实现按钮垂直居中及外层Div与中间Div等高？

方案1：使用Flexbox布局（推荐） #

Flexbox是现代CSS布局的首选方案，能轻松解决垂直居中和高度匹配问题。

修改后的CSS代码：

p {
  font-family: Roboto, Arial;
  margin-top: 0;
  margin-bottom: 0;
}

.user {
  font-weight: 500;
}

.photo {
  width: 46px;
  border-radius: 28px;
}

.user-name,
.user-description,
.status {
  width: 150px;
}

/* 外层容器设置为flex布局 */
.container {
  display: flex;
  align-items: center; /* 让子元素垂直居中 */
  gap: 12px; /* 可选：给元素之间加间距，提升美观度 */
}

/* 让follow容器内的按钮垂直水平居中 */
.follow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.follow-button {
  padding: 8px 16px; /* 可选：给按钮加内边距，优化视觉效果 */
}

修改后的HTML代码：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- 给外层div添加container类 -->
<div class="container">
  <div class="avatar">
    <img class="photo" src="av1.jpg">
  </div>
  <div class="middle-div">
    <div>
      <div class="user-name">
        <p class="user">
          oliver
        </p>
      </div>
      <div class="user-description">
        <p class="user-desc">
          the cat
        </p>
      </div>
      <div class="status">
        <p class="status-desc">
          Popular
        </p>
      </div>
    </div>
  </div>
  <div class="follow">
    <button class="follow-button">Follow</button>
  </div>
</div>

关键修改说明： #

• 外层div添加container类并设置display: flex，align-items: center让三个子元素（头像、中间信息、按钮容器）自动垂直居中，同时外层容器高度会自动匹配最高的子元素（即middle-div），解决高度一致问题。
• 给.follow设置display: flex配合align-items: center和justify-content: center，确保按钮在自身容器内完全垂直水平居中。

方案2：基于inline-block的传统解决方法 #

如果不想用Flexbox，也可以调整inline-block的对齐方式（灵活性较差，仅作了解）：

修改后的CSS代码：

p {
  font-family: Roboto, Arial;
  margin-top: 0;
  margin-bottom: 0;
}

.user {
  font-weight: 500;
}

.photo {
  width: 46px;
  border-radius: 28px;
}

.user-name,
.user-description,
.status {
  width: 150px;
}

.avatar,
.middle-div,
.follow {
  display: inline-block;
  vertical-align: middle; /* 让inline-block元素垂直居中对齐 */
}

/* 让按钮在follow容器内垂直居中，需手动匹配middle-div高度 */
.follow {
  display: table-cell;
  vertical-align: middle;
  height: 80px; /* 需根据middle-div实际高度调整 */
}

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