This question already has answers here:
How to center div vertically inside of absolutely positioned parent div
                                
                                    (9个答案)
                                
                        
                        
                            How to vertically align into the center of the content of a div with defined width/height?
                                
                                    (4个答案)
                                
                        
                        
                            How to center a “position: absolute” element
                                
                                    (25个答案)
                                
                        
                                2年前关闭。
            
                    
如何将flex容器的子元素的绝对位置居中?

容器已经设置为justify-content:center,但是由于孩子的位置是绝对的,因此不会影响它,也不会居中。

徽标(带有徽标的问题随处可见)处于“绝对位置”,以便能够应用z-index,因此我可以将其单击(在它会丢失在几层中之前,我不会看到它)或可以单击它)。

我要附上图片以说明我的观点(请耐心等待,因为我无法嵌入图片-对于此而言,stackoverflow因果报应不足)。相关代码如下。


Situation now, the logo doesn't center above the navigation menu, on mobile
All ok on desktop, given on large screens I'm forcing a float: left to implement the design
The intended result (I've manipulated the screenshot to show the intended final result). How to achieve this?


这是我尝试过的:


使用弹性框居中播放,直到我意识到绝对定位的子元素不起作用
已使用,display: block; margin-left: auto; margin-right: auto;但这没什么区别


如何在移动视图的导航栏上方使徽标居中?而且对我轻松一点,我是一个初学者:-)


  相关HTML:


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



  相关CSS:


@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;
    }
}

最佳答案

对于定位的框(即,除静态位置以外的任何位置的框),z-index属性指定:
  1)当前堆栈上下文中盒子的堆栈级别。
  2)盒子是否建立了本地堆叠环境。


根据MDN - z-index,z-index可用于每个位置除静态以外的元素。也许您应该尝试使用position:relative或类似方法,这样不会使元素脱离其父元素。

10-07 18:07
查看更多