Centering Vertically and Horizontally ~ Tech CopyPast

Strangely enough, one of the more difficult things to do using CSS is centering content. Centering content horizontally is relatively easy. Centering content vertically is a whole different story. If you've ever tried it, it is hard - especially if you want to avoid using tables.
Fortunately, our cries for help were heard, and one of the new weapons added to the CSS3 arsenal to solve this problem is a layout type known as the flexible box layout...also known as flexbox. Flexbox provides you with some really nifty functionality that makes centering content either horizontally or vertically a snap!
In this tutorial, you will learn all about how to use a flexbox to easily center your content where you'll go from something that is top-left aligned to being perfectly center aligned:
example of centering

[ a before and after of what you will create ]

Let's get started!

Getting Started

Go ahead and create a new HTML document and copy and paste the following content into it:

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Centering Content</title>
<style type="text/css">
body {
}
#outer {
}
h1 {
}
#blueDiv {
}
</style>
</head>

<body>
<h1>Centering Content</h1>
<div id="outer">
<div id="blueDiv">
</div>
</div>
</body>

</html>

If you preview your page, you will see something that looks as follows:

[ look ma, no centering! ]

To dive a bit deeper, the two squares you see are actually two divs:

<div id="outer">
<div id="blueDiv">
</div>
</div>

The outer div aptly has the id outer, and the inner div has an id of blueDiv. Our goal is to center the blueDiv inside the outer div. We'll do that next.

Centering using Flexbox

You specify the layout for a particular element by setting the display CSS property. For Flexbox, the value you set for display is simply box. Find the CSS rule with the #outer selector, and add the following non-grayed out lines:

#outer {
}

What you are doing is telling the parent container of the blue square, the outer div, to use the flexbox layout for positioning both itself and its immediate child. As you should recall, the immediate child of the outer div is our blueDiv!
Notice the multiple copies of the display property/value pair with the different browser vendor prefixes. This is necessary until flexbox is officially accepted, so bear with the verbosity for now.
If you preview your page now, what you will see is something that looks as follows:

[ the current results of using the flexbox ]

Notice that your blueDiv element is now stretched to take up the full height of the outer div. We'll fix that shortly.
Now that you have specified the layout type to be a flexbox layout, the last thing that remains is to specify that the contents of your outer div should be centered. The two flexbox properties that specify horizontal and vertical centering are box-pack and box-align.

Centering Vertically with box-align

The flexbox box-align property specifies the vertical alignment of contents inside container whose layout type is a flexbox and the contents are arranged horizontally. The values you can specify are start, end, center, baseline, and stretch.
What we want is to center our content vertically, so you should specify the center value for the box-align property:

#outer {
}

Once you have made these changes, you will see your blueDiv now centered on the vertical axis:

[ your content is now centered vertically ]

Notice that your blueDiv is not only centered vertically, it no longer stretches its height to take up all available space like you saw before. The reason is that, your box-align property is automatically set when you set the layout type to be a flexbox. The default value for the box-align property is stretch, and by explicitly setting it to be center, your content no longer stretches.

Centering Horizontally with box-pack

The last flexbox property we will look at is the box-pack property, and this property allows you to align your content horizontally. Its values can be start, end, center, and justify.
Because we wish to center our content horizontally, add the box-pack property with a value of center:

#outer {
}

Once you have done this, go ahead and preview your document in the browser one last time:

[ everything is now centered ]

Notice that your blueDiv is now centered horizontally as well. Wohooo!

Conclusion

The flexbox marks a major improvement over how you had to lay content out in the past. This layout is fairly new, so only the latest versions of Internet Explorer, Firefox, and Chrome support it. Opera does not support this currently.
Before you feel that everything you've learned can not be used in the forseeable future, there is a JavaScript library called Flexie that brings flexbox support to many new and old browsers. I strongly urge you to use something like Flexie so that you can retain your sanity and layout things easily using flexbox while, at the same time, ensuring your visitors can see it also.