居中以分区为中心的div

.menu div居中居中（左侧）我希望居中根据宽度居中，但由于它基于Wordpress链接，因此无法设置它的宽度。与高度相同，我希望它完全居中高度/宽度。居中以分区为中心的div

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>

来源

2016-01-24 user3550879

你可以调整你的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/

来源

2016-01-24 08:43:21 Hybrid

适用于水平，它可以用于垂直吗？ – user3550879

是的 - 我更新了我的代码，使用'transform'和'transform-style'将水平和垂直方向的'.menu'居中。 – Hybrid

很好用（在Firefox中）我没有所有的浏览器/版本。此方法是否具有良好的跨浏览器兼容性？ – user3550879

因为你不能/不知道。菜单元素的最终宽度，我能想到的唯一的办法让你使用position: absolute与top: 50%; left:50%是如果您在页面加载时计算元素宽度并相应地添加边距。例如

$('.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; 
}

来源

2016-01-24 08:29:30 irot

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

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

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

来源

2016-01-24 08:59:30 agdhruv

居中以分区为中心的div

回答

相关问题