Log in Sign Up

Center a Block Horizontally and Vertically

Do you need to make a page that has a block or an image centered both horizontally and vertically? Want to make sure it stays centered no matter what size the browser window is? Here's how to do it with just CSS.

width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;

Note that the top and left negative margin values must be half the height and width, respectively.

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top