New Toronto Group
 - New Toronto Group

Vertical alignment in CSS3: choosing your Responsive Design solution

| Posted on March 22th, 2016 by James McGeachie


If you're working in front-end of Web Development, chances are you've faced the frustrations of centering your content vertically at least once, maybe pulling out a few hairs in the process. The problem isn't just aligning on desktop, but also ensuring it remains that way on your mobile UI, or any other device. When your web design relies on that content being in the middle, then you have to get it to work consistently.

Now, chances are you've googled this topic already and fished through a sea of different approaches. What you may not have discovered is the answer to the question - "Why should I choose one solution over another?"

This article will answer that question and allow you to come to an informed decision on what solution to choose for your project.

Alignment Options

First we'll break down 4 solutions that are used regularly:

1. The vertical-align: middle property using table display.

        .parent {
          display: table;
        }
 
        .child {
          display: table-cell;
          vertical-align: middle;
        }

The display table method doesn’t require any proportional math on your part and has good browser support, including in IE9. However, there are drawbacks. Firstly, if you want to align this parent within its own parent, you’ll have to wrap it inside a container first, as you can’t give the parent both display: table; and display: table-cell; properties. With multiple layers of alignment, this can result in an excessive number of elements. Secondly, the use of the display: table property means you’re forgoing the use of other properties which you may need and instead are using ‘table’ for a non tabular-data purpose.

Support: Most modern browsers. No IE6 or IE7.

Example:

2. 2D Transforms - TranslateY

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

Vertical alignment through CSS 2D Transforms is useful for centering bodies of text and images within their element on a one-off basis. It has good browser support and is precise. However, it can be less useful when centering multiple layers of content. It also relies on the use of position: relative; which may not be how you were planning to position the element. In the Plunker example, I’ve used pixel margin values to center the box, then I’ve used the TranslateY method to center the text within the box.

Support: Most modern browsers. IE9 requires the ms- prefix. No Opera Mini.

Example:

3. CSS3 Flexbox

        .parent {
          display: flex;
        }
 
        .child {
          margin: auto;
        }

CSS3 Flexboxes are very powerful layout tools, in particular for responsive design. The example here shows how simple both horizontal and vertical alignment can be using them. With 2 lines of CSS, one in the parent element and one in the child, you can align on both axes. In the example below you can see multiple layers of alignment as the text is aligned within each box by the same manner the boxes are within the container, making them one of the most efficient alignment mechanisms. Unfortunately, support is the big problem. Older versions of Internet Explorer do not support Flexboxes at all and even IE11 only has partial support. This means when designing enterprise applications that are aimed at an expansive and inclusive audience, Flexboxes have to be avoided.

Support: Not supported by IE8 or IE9 at all and only partial support in IE10 and 11. Supported by most other browsers.

Example:


4. Margin Measurement

        .parent {
          height: 300px
        }
 
        .child {
          height: 200px;
          margin-top: 50px;
        }

When other options don’t cut it, or if you need universal browser support, then setting margin values yourself to align exactly how you mathematically specify is the best solution. In our example, the parent container is 300px in height and the element to be positioned is 200px, giving 100px left over vertical space (as there's no borders/padding). As we want equal top and bottom margins, then they should be 100 / 2, which is 50px. So by assigning a margin-top of 50px, this content is vertically centered. For responsive design, % values or ‘ems’ should be used rather than pixels. This approach allows for fine-tuning, which you'll want if you’re working with a design that’s intended to be pixel perfect. Generally this approach works best if the centered content is not going to change in size relative to its container. If you’re working with paragraphs of text of any length, this is a problem. Also, on a larger site with many different pages and containers, doing the measurement math can be time consuming when there are alternatives that will align the content without any measurements required.

Support: All browsers

Example:


What to choose?

CSS3 Flexboxes are an excellent all around tool for responsive app design and because they make vertical alignment simple, they would be my first recommendation. However, if Internet Explorer support is integral to your app, then you'll have to choose a different option. In that circumstance, your choice should depend on the following question: Is the size of my content going to change proportional to its container? If the answer is no, then you should just set vertical margin sizes as that has excellent browser support and wont require changing display or position properties. If the answer is yes, then you'll want to choose either the 2D Transform method or the display table method. Which of those you choose should be dependent on the parent element and whether or not using table display properties or position relative works in the context of your application.

 

Posted in HTML5, CSS3  | Comments (0)

Comments (0)


Add a Comment





To use reCAPTCHA you must get an API key from http://recaptcha.net/api/getkey

Allowed tags: <b><i><br>Add a new comment: