Html 由于flex容器的绝对定位子元素不参与flex布局，如何将元素居中？

如何将flex容器的子元素置于绝对位置的中心

容器已设置为

justify content:center

，但由于子容器处于绝对位置，因此不会影响它，也不会居中

logo（手头的问题是logo）被“绝对定位”为能够应用z-index，所以我可以点击它（在它在几层中丢失之前，我不会看到它或能够点击它）

我附上图片来解释我的观点（请容忍我，因为我不能嵌入图片-没有足够的因果报应）。相关代码如下

这就是我尝试过的：

• 玩flex box居中，直到我意识到这对绝对定位的子元素不起作用
• 已使用，

  显示：块

  <代码>左边距：自动<代码>右边距：自动；但这没什么区别

如何将徽标置于移动视图导航栏上方的中心位置？对我放松点，我是初学者：-）

相关HTML：

对于定位框（即具有除静态以外的任何位置的框），z索引属性指定： 1） 当前堆叠上下文中长方体的堆叠级别。 2） 框是否建立本地堆叠上下文

---

根据，z索引作用于除静态之外的位置的每个元素。也许你应该尝试使用

位置：相对的
或类似的工具，它不会将元素从父元素中射出。
只需使用媒体查询，并在手机上更改logo
内部报头的
位置：相对的
和
文本对齐：居中。或者甚至不需要媒体查询，我只是在您的网页上尝试，将cust从绝对更改为相对，并添加文本对齐中心，它将起作用：DSuper Thank@Goku，applicated
position:relative
，这很有帮助，但
text align:center
没有，然后我将flex child centering带到子CSS中，并使用
display:flex；对齐项目：居中；证明内容：中心成功了你知道你现在要做什么了^^^谢谢@d-shaller，使用
position:relative
和
display:flex；对齐项目：居中；为其工作的子CSS调整内容：中心
。
<header class="masthead__navigation mb-auto d-flex w-100 p-3 mx-auto flex-column">
      <div class="inner">
        <a class="inner-masthead" href="#"><img src="assets/images/logo.jpg" style="max-height:40px; width:auto;"></a>
        <nav class="nav nav-masthead justify-content-center">
          <a class="nav-link active" href="#">Home</a>
          <a class="nav-link" href="#">Blog</a>
          <a class="nav-link" href="#">Join Newsletter</a>
          <a class="nav-link" href="#">Contact</a>
        </nav>
      </div>
    </header>

@media (min-width:768px) {

    .masthead__navigation {
                padding-right: 2.5rem !important;
                padding-left: 4rem !important
    }

    .nav-masthead .nav-link {
                color: #262626 !important;
              color: rgba(26, 26, 26, .5) !important;
    }

    .nav-masthead .nav-link:hover,
    .nav-masthead .nav-link:focus {
            border-bottom-color: rgba(26, 26, 26, .5) !important;
    }

    .nav-masthead .active {
              color: #000 !important;
              border-bottom-color: #000 !important;
    }
}

.masthead__navigation {
        margin-bottom: 2rem;
        padding-bottom: 0 !important;
        width: 100vw !important;
        position: absolute !important
}

.inner-masthead {
    margin-bottom: 0;
        position: absolute !important;
        display: block;
      margin-left: auto;
      margin-right: auto;
        z-index: 4 !important
}

.nav-masthead .nav-link {
          padding: .25rem 0;
          font-weight: 700;
            color: #999;
          color: rgba(255, 255, 255, .5);
          background-color: transparent;
          border-bottom: .25rem solid transparent;
            z-index: 4 !important
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
          border-bottom-color: rgba(255, 255, 255, .5);
}

.nav-masthead .nav-link + .nav-link {
          margin-left: 1rem;
}

.nav-masthead .active {
          color: #fff;
          border-bottom-color: #fff;
}

@media (min-width: 48em) {
    .inner-masthead {
        float: left;
    }
    .nav-masthead {
        float: right;
    }
}