A common problem in CSS is centering elements wherefore various approaches exist. But often if I need one at a time, no one comes to mind. So I summarize here briefly how to center elements in CSS horizontally and vertically.

Consider the following simple website, which shows a colored box.

The code for the index.html looks as follows

and the code for the cascading style sheet named main.css is as follows:

By the way, a modern text editor for web design is brackets. I’m using this editor for designing webpages and highly recommend it.

My preferred way to horizontally center the box is by adding the margin property to the selector. The updated CSS looks as follows:

The values of the property are set to 0 and auto. 0 means that the top and bottom margin are equal to 0. Auto says move left and right in the equal amount that finally centers the box on the page.

Centering the box vertically on the page is as easy as follows:

Centering the box horizontally as well as vertically is a bit more complicated. But the trick here is to add a container element which is vertically centered and its width is set to 100%. The box is contained in this container and then can be horizontally centered. The code looks as follows:

Whenever, one is playing with CSS and trying to achieve such things, it it often very helpful to set a background color for the different elements.This gives a good way the „optically“ debug the code and seeing exactly what is going on.