dave dave - 5 months ago 18
CSS Question

How to center a DIV popup?

I am trying to centre a DIV which contains a form. I have managed to grey out the back ground and would like to centre the form within the window. Below is what I have done so far, but I do not know how to progress it further to get the result that I need.

I am able to 'auto margin' horizontally, but I am not able to do this vertically (please see image). If you stretch the browser window further vertically, the form stretches to occupy all of the vertically space.

enter image description here

#idOfForm{
margin: auto;
z-index: 10000;
position: absolute;
background-color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
width: 500px;
min-height: 250px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
font-family: sans-serif;
color: #484848;
}

Answer

This is how you can center elements easily:

Suppose you have the following:

<div class="aaa">
    fsdfsd
</div>

Use the following css:

.aaa {
    transform: translate3d(-50%, -50%, 0);
    position: absolute;
    top: 50%;
    left: 50%;
 }

Here is jsfiddle: https://jsfiddle.net/ffnvjz4q/
This is the code you need:

#idOfForm{
    transform: translate3d(-50%, -50%, 0);
    z-index: 10000;
    position: absolute;
    background-color: white;
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
    padding: 10px;
    width: 500px;
    min-height: 250px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #b8b8b8;
    font-family: sans-serif;
    color: #484848;
 }