Flexbox实现菜单标题居中且操作按钮居右的布局方案

要实现标题在容器完全居中，同时操作按钮固定在菜单末尾，有几种可行的方法：

方法一：绝对定位操作按钮 #

利用绝对定位让按钮脱离文档流，不占用布局空间，这样标题可以不受干扰地居中。

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width:16rem;
    background-color:green;
    padding:1rem;
    margin-top:1rem;
    position: relative; /* 设置为按钮的定位父容器 */
}

.text{
    background-color:lime;
    padding:1rem;
}

.ico{
    height: 2em;
    width: 2em;
    position: absolute;
    right: 1rem; /* 与容器内边距保持一致，保证间距 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中对齐 */
}

对应的HTML无需修改：

<div class="container">
  <span class="text">My title is a bit long</span>
  <button class="ico">IC</button>
</div>

方法二：添加占位元素平衡布局 #

在标题左侧添加一个与按钮宽度相同的占位元素，让容器左右两侧空间对称，从而实现标题居中。

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width:16rem;
    background-color:green;
    padding:1rem;
    margin-top:1rem;
}

.text{
    background-color:lime;
    padding:1rem;
    margin: 0 auto;
}

.ico{
    height: 2em;
    width: 2em;
}

.ico-placeholder{
    width: 2em; /* 与按钮宽度一致 */
    visibility: hidden; /* 隐藏但保留宽度 */
}

修改后的HTML：

<div class="container">
  <div class="ico-placeholder"></div>
  <span class="text">My title is a bit long</span>
  <button class="ico">IC</button>
</div>

方法三：使用Grid布局（推荐） #

Grid布局可以更直观地分配空间，让标题跨列居中，按钮固定在右侧。

.container{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width:16rem;
    background-color:green;
    padding:1rem;
    margin-top:1rem;
}

.text{
    background-color:lime;
    padding:1rem;
    grid-column: 1 / -1; /* 标题横跨所有列 */
    text-align: center; /* 文本水平居中 */
}

.ico{
    height: 2em;
    width: 2em;
    grid-column: 2; /* 按钮放在第二列 */
    grid-row: 1; /* 与标题同一行 */
    justify-self: end;
}

HTML保持不变即可。

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