固定元素內部的垂直/水平居中

Question

我的Wordpress網站上有固定的覆蓋（全屏）。我希望固定div內的元素是水平/垂直中心。我可以找到的所有示例都將父級設置爲相對，但高度和寬度必須設置爲100％。

HTML

<div class="overlay"> 
    <nav class="menu"> 
     <?php wp_nav_menu(array('container_class' => 'main-nav', 'theme_location' => 'primary')); ?> 
    </nav> 
</div> 

CSS

.overlay{ 
position: fixed; 
display: none; 
z-index: 50; 
top: 0; left: 0; 
height: 100%; width: 100%; 
background: rgba(0, 0, 0, 0.85); 
overflow: auto; 
} 

.menu { 

} 

我試着用Y/X-翻譯，但家長必須是相對

Answer 1

您需要添加一個容器的導航元素將其設置爲相對位置，以便子元素nav將位於絕對位置，並且您可以通過該位置將覆蓋位置放在導航的中心位置。

HTML

<div class="overlay"> 
    <div class="nav-wrapper"> 
    <nav class="menu"> 
     <a>One</a> 
     <a>Two</a> 
     <a>Three</a> 
    </nav> 
    </div> 
</div> 

CSS

.overlay{ 
position: fixed; 
z-index: 50; 
top: 0; left: 0; 
height: 100%; width: 100%; 
background: rgba(0, 0, 0, 0.85); 
overflow: auto; 
} 

.nav-wrapper { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

.menu { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    background: #fff; 
} 

請檢查此琴：https://jsfiddle.net/5nmrdbhL/