Site Popup And Spinner

Making a div at the center of the page

Problem

<html>
<head></head>
<body>
    <div id="center"> <!-- We want this div to the vertically and horizontally center -->
        Some cool popup
    </div>
</body>
</html>

Sometimes it gets irritating when all we want to do is:

  • center something both horizontally and vertically
  • we do not know the size of the thing

If we do know the size, the answer is pretty straight forward, assuming we know the size is 50px x 50px;

#center {
    position: fixed;
    top: 50%;
    left: 50%;
    /* top and left only moves it compares against the top left corner of the div */
    margin-top : -50px;
    margin-left: -50px;
}

The problem is, we don’t know the size!!

Solution

A CSS3 featured called transform elegantly solves this problem.

#center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    /* translate percentages are based on the size of the obj along the x and y axis respectively) */
}

Source