How to position a web component wrt window?

Question

I'm designing a popup web component using polymer. The requirement is that I want it to be positioned exactly at the center of the browser window.

Here's the demo link - https://jsbin.com/xupowov/edit?html,output

Looks like the web component takes the direct parent as the window reference.

Isn't there a way to position it wrt window just like how usual position: fixed works?

Answer 1

If you want to position things relative to the window size, you have not use % but use wh and vh

Look at this

     .picker {
        border-radius: 4px;
        border: 2px solid silver;
        background: white;

        position: fixed;

        height: 50px;
        left: -10vw; 
        right:-10vw;
      }

https://jsbin.com/hugecuxebo/1/edit

now it in the center horizontal.