Making div/pop-up/overlays center of the screen irrespective of the screen size.

Making div/pop-up/overlays center of the screen irrespective of the screen size.

About :Front-end programers comes in a situation where we need to put our pop-ups/overlays center to the scrceen irrespective of the screen size.

Some times we face difficuly to get pop-up center to all the screens sizes,and if we give piexls manually then we need to give differnt left/rigth pixel values for different screen sizes. So we need to find global way to make all pop-ups center of the screen and here it is.

Let us take sample pop-up HTML which we want to make center for all screen sizes:

<div class='center'>
<div class="header">This is header of the pop-up</div>
<input type="button" value="save">
<input type="button" value="cancel">
</div>

For the pop-up div with the class center we can write css like this:

.center {
position: absolute;
display:block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// Height could be left out!
width: 40%;
height: 50%;
}

This is one of the simple method with this will get desired result,we will get pop-up to the center of all screen sizes.