居中以分區爲中心的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

回答

相關問題