How to center an element in the middle of the browser window?

Question

How can I place some HTML element (say, a <div>, for example) in the middle of a browser window (not page, not screen)? Not depending on browser window size, screen resolution, toolbar layout, etc. E.g. I want it to be in the middle of the browser window.

Answer 1

To do this you need to know the size of the element you are centering. Any measurement will do (i.e. px, em, percent), but it has to have a fixed size.

The css will look as follows:

 // Replace X and Y with a number and u with a unit. do calculations  // and remove parens .centered_div {    width: Xu;    height: Yu;    position: absolute;    top: 50%;    left: 50%;    margin-left: -(X/2)u;    margin-top: -(Y/2)u; } 

Edit: This centers in the viewport. You can only center in the browser window using JavaScript. But that might be good enough anyway, since you probably want to display a popup/modal box?

Answer 2

div#wrapper {     position: absolute;     top:  50%;     left: 50%;     transform: translate(-50%,-50%); }