html - 在 Flexbox 中将元素置于两个兄弟元素之间居中

Question

我的标题位于网页的 flexbox 内容区域的中心。向右大约 30 像素。我应该更改 flex 盒的尺寸吗？如果是这样，怎么办？非常感谢您的建议!

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" alt="hecc" style="width:310px; height:250px;" class="manyarms">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/de/71/29/de71292c5df818b418fe09cbca9c49c2.jpg" alt="hecc2" 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" alt="hecc3" style="width:310px; height:250px;" class="sensible">
      <img src="http://img03.deviantart.net/a0a6/i/2010/007/6/4/octopus_by_mnk7.jpg" alt="hecc4" 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>

Answer 1

这是您用来对齐 flex 元素的代码:

.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)