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

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/