How to best center website content with CSS3

I have noticed a trend in which many websites are centering content both horizontally and vertically while still ensuring the area is fully responsive.  It got me thinking about different ways, both simple and complex, to center website content in horizontal alignment, vertical alignment or a combination of the two. 

Horizontally

Let’s start with horizontal centering.  The simplest method to center an inline element is to use the property “text-align” and setting the value to “center.”  This will not always work because many elements that are inline are not centered.  For example, sometimes there will be a block element that needs to be centered, therefore requiring a different style.  To accomplish that task, use the “margin” property with the value of “0 auto.”  This will give the element a top and bottom margin of 0, while centering the element horizontally using the auto value. 

The above approach works well with just one block element.  If more blocks are needed there are two different approaches:

1. Create a div that wraps around the multiple elements we want to center. The wrapping div will have the “text-align: center” declaration while the inner divs will have a “display: inline-block” declaration. See the screenshot below. These styles are not required to obtain the centering of the elements.

2. Use the same setup in approach 1 but use different declarations for wrapping the div. Those declarations consist of “display: flex” and “justify-content: center.”  Support has increased for this flexbox method which in turn as has led to a safe cross-browser approach.  Be sure to reference and include any vendor prefixes for the flex items in order to make sure it works with older browsers.  If you want to stack multiple elements on top of each other you can still use the “margin: 0 auto” declaration for each interior div.  This has become my preferred approach for horizontal centering.

Vertically

Centering vertically is more challenging.  In order to conserve space this post will only include centering a block element example.  Similar to horizontal centering, the flexbox method is currently my preferred approach because the height of the element does not matter.  To leverage the flexbox method for vertical centering, add these three declarations to the parent (wrapper) element and the interior child divs should center vertically.

display: flex;
flex-direction: column;
justify-content: center;

Similar to Horizontal centering, make sure to include the vendor prefixes.

A second method, if the height of the element is known and static:


.parent {
position: relative;
}

.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}


You can adjust the numbers as necessary. The image below gives you a deeper look into the method.

A third method may be used if the height of the element is unknown or the object is dynamic. I prefer to use this method even if I do know the height.  The advantage to this method is it provides formatting stability even if content subsequently changes.  To use this method, the transform property from CSS3 is leveraged.  Specifically, the value is “translateY(-50%)”  where the 'Y' represents the vertical axis from top to bottom.  This will move the element upward vertically by 50%.  The reason for moving upward is to respond to the first 50% downward movement from the declaration “top: 50%.”  The middle of the element needs to be centered - not the top of the element.  That’s where the transform property comes in.  Again, be sure to include the vendor prefixes for cross browser compatibility.  The method appears like this:

.parent {
position: relative;
}

.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

To reiterate, flexbox is the easiest method to use for this situation. The flexbox method looks like this:
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}

Both Horizontally and Vertically

When Cloud Construct’s visual designer hands off design compositions for me to implement, I tend to use the following methods. The most common use case is to center text in the middle of a full width image, which is mostly being used as a banner (hero) image of some sort.
The first method is for unknown width and height. It uses the transform property again and allows the element to center perfectly both vertically and horizontally. To do so you want to use the rules below. I have also provided an example following these suggested formulas:
.parent {
position: relative;
}

.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

And of course, you guessed it, there is an easier way using the flexbox method.
.parent {
display: flex;
justify-content: center;
align-items: center;
}

Conclusion

No matter the situation, there is always a way to get your content element centered in a horizontal, vertical or combination of both horizontal and vertical alignments. I hope this post provides you with helpful information the next time you find yourself needing assistance with centering.