我如何中心div到身體不是它的父母

Question

我有一個粘性的主菜單與選項卡「類別」下拉菜單「categoriesDropdown」，當我將鼠標懸停在它上面。

• 我需要下拉菜單具有屏幕的寬度，並且是 在屏幕的中心。

• 我需要下拉菜單來粘貼到主菜單的底部。

唯一的問題是，我似乎無法將下拉菜單居中。我只能把它放在相對於父div（類別） 我使用的代碼顯示在下面。

<div class="categories"> 
    <a>Categories</a> 
    <div id="categoriesDropdown"></div> 
</div> 

CSS

.categories { 
    padding-left: 20px; 
    padding-right: 20px; 
    height: 45px; 
    display: inline-block; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

#categoriesDropdown { 
    position: absolute; 
    background: #1d1d1d; 
    width: 100vw; 
    height: 0px; 
    z-index: -1; 
    overflow: auto; 
} 

#categoriesDropdown.show { 
    height: 500px; 
} 

編輯：發生這種情況時，我嘗試左：0;正確：0; the grey square being the drop down menu

Answer 1

只用CSS就很棘手，但這裏有jQuery和css可能的解決方案。我不確定這會對你有沒有幫助。

身體

<div class="categories"> 
    <a>Categories</a> 
    <div id="categoriesDropdown" class="categoriesDropdown"> </div> 

的CSS

body{ 
    margin : 0px; 
    padding : 0px; 
    } 
    .categories { 
    padding-left: 20px; 
    padding-right: 20px; 
    height: 20px; 
    display: inline-block; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    cursor : pointer; 
    top: 50px; 
    position: absolute; 
    } 
    .categoriesDropdown { 
    position: relative; 
    background: #1d1d1d; 
    width: 98vw; 
    height: 0px; 
    z-index:-1; 
    overflow:auto; 
    margin:0 auto; 
    color:#fff; 
    } 
    .categoriesDropdown_show { 
    height: 100px; 
    } 

腳本

$(document).ready(function(){ 

    var c = $(".categories"); 
    var position = c.position(); 

    $(".categories").mouseenter(function(){ 
     $("#categoriesDropdown").appendTo('body'); 
     $(".categoriesDropdown").addClass("categoriesDropdown_show"); 
     $('#categoriesDropdown').css({'top':'calc('+position.top +'px + 20px)'}); 
    }); 
    $(".categories").mouseleave(function(){ 
     $(".categoriesDropdown").removeClass("categoriesDropdown_show"); 
     $("#categoriesDropdown").appendTo('categories'); 
    }); 
    });