divをBODYの中心にするにはどうすればいいですか？それは親のものではない

Question

私はマウスの上にマウスを置くと、メニュー "categoriesDropdown"をドロップするタブ "categories"でスティッキーメインメニューを持っています。

• 私は、画面の幅を有するようにドロップダウンメニューを必要とし、画面に を中心にします。

• メインメニューの下部に固定するには、ドロップダウンメニューが必要です。

唯一の問題は、私は本体にドロップダウンメニューの中心を置くことができないということです。私はそれを親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'); 
    }); 
    });