Question

.menu div居中（它的左侧是）我希望它根据宽度居中，但我不能设置它的宽度，因为它基于Wordpress链接。与高度相同，我希望它完全居中高度/宽度。

CSS

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

.nav-wrapper {
 position: relative;  
 height: 100%;
 width: 100%;
 }
.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;
}

HTML

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

Answer 1

通过执行以下操作，您可以将绝对定位的div居中：

.menu{
position : absolute;
left : 0px:
right : 0px;
margin : 0px auto;
}

当然，您也可以使用JavaScript。我给的是一种仅限CSS的方法。

Answer 2

因为你不能/不知道.menu元素的最终宽度，所以我能想到的唯一方法就是让position: absolute与top: 50%; left:50%一起使用，如果你计算元素在页面加载时的宽度并相应地添加边距。 e.g。

$('.menu').css('marginLeft', $('.menu').width() * -0.5);

或者，您可以保留HTML并尝试下面的样式，但我不确定您需要将其垂直对齐。

.menu {
  // remove the absolute positioning and top/left
  display: inline-block;
  vertical-align: middle;
  background: #ffffff;
  text-align: left; // assuming you want its contents left aligned
}

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

Answer 3

您可以重新构建CSS，以便绝对定位nav-wrapper，并使用text-align:center技巧将块置于中心位置：

.menu {
 display:inline-block;
 background: #fff;
}

.nav-wrapper {
 position: absolute;  
 width: 100%;
 text-align:center;
 top:50%;
 transform: translateY(-50%);
 }
.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;
 transform-style: preserve-3d;
}

JSFiddle（display:none已禁用）：https://jsfiddle.net/Hybridx24/1u0fd3nn/

将以div为中心的div居中

3 个答案: