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

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-translate 但父级必须是相对的

Answer 1

您需要为您的 nav 元素添加一个容器并将其设置为相对位置，以便子元素 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/