如何使用 flexbox 让中间元素始终完美居中 [重复]

Posted 2023-03-05

【中文标题】如何使用 flexbox 让中间元素始终完美居中 [重复]

【英文标题】：How to have middle element always perfectly centered using flexbox [duplicate]

【发布时间】：2019-06-17 08:32:27

【问题描述】：

看看下面的例子，我的目标是让中间项始终居中 - 直接在容器 div 中居中。然后将左右项对齐到容器的最左侧和右侧。

下面是我为容器设置的样式，但是它仍然在元素之间放置了均匀的空间，因此中间元素不会完全位于中间。与右侧和中间元素相比，我想要的结果是左侧和中间元素之间的空间更大 - 但中间元素再次始终居中

我如何做到这一点？

display: flex;
  justify-content: center;
  align-items: center;

  .left 
    margin-right: auto;
    justify-self: center;
    align-self: center;
  

  .right 
    margin-left: auto;
    justify-self: center;
    align-self: center;
  

Example Image

【问题讨论】：

请分享您的 css 和 html，以便重新创建您的问题。

【参考方案1】：

您可以在父容器上使用justify-content: space-between;。

.parentContainer 
 display: flex;
 justify-content: space-between;

<div class="parentContainer">
 <div class="left">1</div>
 <div class="middle">2</div>
 <div class="right">3</div>
</div>