Exact Centering With Flex

There are a number of methods to both horizontally and vertically center content. Using the CSS display:flex; declaration may be the easiest of all.

Two other methods to horizontally center content are with CSS declarations text-align:center; and with margin:0 auto;.

Several other methods to vertically center content are described on Willmaster.com at:

1. Vertically Align Content with CSS — Vertically center elements beginning with the CSS display:table-cell; declaration.

2. Vertical Content Centering With CSS — Vertically center elements with CSS when height of item to align is known. A JavaScript addendum for unpredictable element height.

3. Responsive Fixed and Absolute Centering — Vertically center elements of unpredictable height with CSS and JavaScript.

The display:flex; declaration for a div creates what's often referred to as a "flex box". Content is centered within the flex box.

The flex box can be used with all of the latest most popular browsers. Earlier browser versions used a browser-specific prefix for the flex declaration, "-webkit-" for example. (The code in this article does include the prefix versions of the declaration so it will work with those earlier browsers.)

Here's an example flex box with vertically and horizontally centered content.

The Example CSS

The CSS is for the flex box (the display:flex; div) and for the content being centered within the flex box. (To avoid clutter, borders and background colors used in the example flex box have been omitted from this code.)

<style type="text/css">
.display-flex-div {
   display:-webkit-box;
   display:-moz-box;
   display:-ms-flexbox;
   display:-webkit-flex;
   display:flex;
   height:2in;
   max-width:3in;
   }     
.content-to-center { margin:auto; }
</style>

The blue-colored declarations are what create a flex box. Only display:flex; is needed if all visitor's browsers will be the latest version. If the others are specified, display:flex; must occur last, like it is in the code above. The reason for that is because CSS cascades. The last display property in the list that the browser recognizes will be used. So, if the browser recognizes display:flex; as valid, then any earlier display property it may have recognized as value will be overwritten.

The green-colored declarations specify the dimensions of the flex box, which may be changed — or omitted, in which case the flex box will be as wide as it can go, the width of the column where the div is published, and the height will be the height of the content. Borders, positioning, and other CSS rules may be added.

The red-colored CSS rule applies to the content within the flex box div.

The margin:auto; declaration is what centers the content within the flex box div both vertically and horizontally.

There is no width or height specification for the content-to-center class because the div adjusts its dimensions as needed.

The auto Value

Let's talk about the effect the auto value has.

The margin:auto; declaration is shortcode for margin:auto auto auto auto; (The auto's represent the top, right, bottom, and left margins, respectively.)

Because auto is applied to each side, the content is pushed away from each side to rest in the center.

If any auto is omitted or contains a distance value (like 0px or 1em), then the auto for the opposite side pushes the content as far as it can toward the side without auto.

As an example, if auto is omitted from the right margin, then the auto on the left margin pushes the content as far as it can to the right edge of the flex box div.

More examples:

/* center horizontally and vertically */
margin:auto auto auto auto;

/* push content to bottom of flex box and center horizontally */
margin:auto auto 0px auto;

/* push content to bottom-right corner of flex box */
margin:auto 0px 0px auto;

The Example Content

Here's the code for the example content (also with borders and colors omitted to reduce clutter):

<div class="display-flex-div">
   <div class="content-to-center">
This is an example 
<br>of content centered 
<br>in a flex box div.
   </div>
</div>

The blue-colored code is the flex box div.

The red-colored code is the content div that is centered in the flex box div. The green-colored content is what the div contains and what is centered.

Exact Centering, Responsively

The centering is done by the browser according to CSS rules. Exact centering is maintained even when the size of the content to center varies.

And, it's responsive. As the browser window width changes, the centering changes accordingly.

(This article first appeared in Possibilities ezine.)

Will Bontrager