Centering elements in CSS

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.

website_centering

The code for the index.html looks as follows


<!DOCTYPE html>
<html>
<head>
<title>CSS centering</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="box bluebox"></div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub

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


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.bluebox {
background-color: blue;
}

view raw

main.css

hosted with ❤ by GitHub

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:


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.bluebox {
background-color: blue;
margin: 0 auto;
}

view raw

main.css

hosted with ❤ by GitHub

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:


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.bluebox {
background-color: blue;
position: absolute;
top: 50%;
margin-top: -50px;
}

view raw

main.css

hosted with ❤ by GitHub

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:


<!DOCTYPE html>
<html>
<head>
<title>CSS centering</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<div class="box bluebox"></div>
</div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.container {
position: absolute;
top: 50%;
margin-top: -50px;
width: 100%;
}
.bluebox {
background-color: blue;
margin: 0 auto;
}

view raw

main.css

hosted with ❤ by GitHub

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.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s