如何实现标题居中、按钮居右的容器垂直水平居中Flex布局？

核心思路 #

通过Flex布局的弹性空间分配，让标题区域占据容器剩余宽度，同时实现标题文字的水平垂直居中，按钮自动靠右侧并保持垂直居中。

完整代码实现 #

React组件（JSX）

import React from 'react';
import './Header.css';

const Header = () => {
  return (
    <div className="header-container">
      <div className="title-area">
        <h1>页面标题</h1>
      </div>
      <button className="right-btn">点击操作</button>
    </div>
  );
};

export default Header;

对应的CSS样式

/* 容器基础样式 */
.header-container {
  display: flex;
  align-items: center; /* 垂直居中所有子元素 */
  height: 70px; /* 自定义容器高度，按需调整 */
  border: 1px solid #e0e0e0; /* 可选：显示容器边框方便调试 */
}

/* 标题区域：占据剩余宽度并内部居中 */
.title-area {
  flex: 1; /* 撑满容器除按钮外的所有空间 */
  display: flex;
  justify-content: center; /* 标题文字水平居中 */
}

/* 右侧按钮样式 */
.right-btn {
  margin-right: 16px; /* 按钮右侧留间距，按需调整 */
  padding: 8px 16px;
  cursor: pointer;
}

之前错误的原因说明 #

• 错误1（按钮在容器外）：容器是块级元素，会独占一行，按钮作为块级元素会被挤到容器下方，无法和标题处于同一行。
• 错误2（按钮在容器内但紧邻标题）：没有给标题区域分配剩余空间，Flex容器内的元素默认紧凑排列，所以按钮会紧跟在标题旁边，无法靠右侧。

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