Question

我的Wordpress网站上有一个固定的叠加层（全屏）。我希望固定div内的元素是horiz / vert center。我可以找到的所有示例都将父级设置为相对，但高度和宽度必须设置为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元素添加一个容器并将其设置为相对位置，这样子元素导航将位于绝对位置，并且您可以将导航与叠加层居中定位。

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

固定元件内的垂直/水平定心

1 个答案: