在flexbox中的两个兄弟之间居中元素[重复]

Posted 2023-03-05

【中文标题】在flexbox中的两个兄弟之间居中元素[重复]

【英文标题】：Centering an element between two siblings in flexbox [duplicate]

【发布时间】：2016-11-23 19:56:37

【问题描述】：

我的标题在我网页的弹性框内容区域内居中。右边大约 30 像素。我应该改变弹性盒子的尺寸吗？如果是这样，怎么做？非常感谢您的建议！

a 
  outline: 0;


body 
  background: linear-gradient(to bottom, #1D4350, #A43931);
  background-attachment: scroll;
  font-family: 'PT Mono', monospace;


html,
body,
.wrapper 
  max-width: 100%;
  min-height: 100%;
  min-width: 960px;
  margin: 0 auto;


.wrapper 
  position: relative;


.content 
  height: 1200px;


.header 
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;


.Octagon 
  color: #2aa186;
  line-height: 30%;
  margin-top: 25px;


.LT 
  color: #3a5454;
  line-height: 0;
  font-style: italic;
  text-align: center;
  position: relative;
  bottom: 33px;


.boi 
  position: relative;
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;


.iob 
  position: relative;
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;


.boi:active,
.iob:active 
  top: 3px;


.boi:hover,
.iob:hover 
  text-shadow: 0 0 10px #a193ff;


.manyarms,
.colorful 
  position: absolute;
  margin-top: 30px;
  margin-left: 30px;


.A1 img 
  -webkit-transition: all 0.75s ease-in-out;
  -moz-transition: all 0.75s ease-in-out;
  -ms-transition: all 0.75s ease-in-out;
  -o-transition: all 0.75s ease-in-out;
  transition: all 0.75s ease-in-out;


.manyarms,
.A1:hover .colorful 
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;


.A1:hover .manyarms,
.colorful 
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;


.A2 img 
  -webkit-transition: all 0.75s ease-in-out;
  -moz-transition: all 0.75s ease-in-out;
  -ms-transition: all 0.75s ease-in-out;
  -o-transition: all 0.75s ease-in-out;
  transition: all 0.75s ease-in-out;


.sensible,
.A2:hover .BlueBoi 
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;


.A2:hover .sensible,
.BlueBoi 
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;


.sensible,
.BlueBoi 
  margin-top: 30px;
  margin-right: 20px;
  right: 10px;
  position: absolute;


.VS 
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;


.verr 
  padding-left: 31px;
  padding-top: 263px;


.special 
  padding-right: 71px;
  padding-top: 263px;


.footer 
  bottom: 0;
  left: 0;
  margin-right: 10px;
  position: fixed;
  text-align: right;
  width: 100%;

<div class="wrapper">
  <div class="header">
    <a href="https://www.google.com/?gws_rd=ssl" target="_blank" style="text-decoration: none;">
      <p class="iob">Information</p>
    </a>
    <h1 class="Octagon">The Pragmatic Octopus</h1>
    <a href="https://www.google.com/?gws_rd=ssl" style="text-decoration: none;" target="_blank">
      <p class="boi">Contact</p>
    </a>
  </div>
  <p class="LT">Certes</p>
  <div class="content">
    <div class="A1">
      <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792.jpg"  style="width:310px; height:250px;" class="manyarms">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/de/71/29/de71292c5df818b418fe09cbca9c49c2.jpg"  style="width:310px; height:250px;" class="colorful">
    </div>
    <div class="A2">
      <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg"  style="width:310px; height:250px;" class="sensible">
      <img src="http://img03.deviantart.net/a0a6/i/2010/007/6/4/octopus_by_mnk7.jpg"  style="width:310px; height:250px;" class="BlueBoi">
    </div>
    <div class="VS">
      <p style="color: #6458b7;" class="verr">Here comes a very special boi!</p>
      <p style="color:#6458b7;" class="special">He loves to pose for photos!</p>
    </div>
  </div>
  <div class="footer">
    &copy;Hecc™®
  </div>
</div>

【问题讨论】：

如果左右对象大小不同，中间对象将不会居中....这是预期的行为。 - codepen.io/Paulie-D/pen/akYdEE

【参考方案1】：

这是您用来对齐弹性项目的代码：

.header 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

使用space-between，“信息”和“联系人”元素将位于容器的相对边缘。

因为 flex 容器会根据可用空间的分布来对齐项目，所以您的中间项目将在它们之间居中，而不必在页面上居中。

“信息”的计算宽度为 174 像素，“联系人”的计算宽度为 135 像素，中间项目偏离中心 39 像素。

为了使中间项在页面上居中，其兄弟项的宽度需要相等，因此两侧的空间平衡。

当兄弟姐妹的大小不同时，以下帖子有两种方法可以在 flex 容器中居中：

Methods for Aligning Flex Items along the Main Axis（见框 #71）