# Problem

<html>
<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) */
}