6 methods to vertically align anything in pure CSS

6 methods to vertically align anything in pure CSS

This is a common problem with front-end web design. Browsers and CSS still need to work on easy vertical alignment. Having to use onload javascript and inline CSS for this matter is gross!

But there are pure CSS solutions, only not straight forward. The example HTML code for this is the following, where we want the children to be vertically centered in the parent element:

<div class="parent">
    <div class="children">I'm vertically centered!</div>
</div>

The translateY method

Already appointed by Chris Coyier back in 2013.

  1. We move the children element (it must be positioned either relative, absolute or fixed) down to the middle of it’s parent using top: 50%,
  2. then we pull it back up by half, with transform: translateY(-50%).

This works because the “top: 50%” is 50% of the parent’s height, while the “translateY: -50%” is -50% of the child’s height.

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

Or using vendor prefixes this ends up as:

.children {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

PROS: The biggest pro here is that you don’t need to specify the height of the element and it is clean CSS. Also, it works on floated elements.

CONS: It makes use of vendor prefixes. If you want to centralice a relative positioned element, its parent must have a height value, i.e., it won’t work if said parent’s height is set to auto. Also, this method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d. Like following:

.parent {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

Calc method

Another common way to achieve pixel perfect vertical alignment is using the calc property.
PROS: It is widely supported,
CONS: but has it’s drawbacks nevertheless, like having to specify a height for the element.

.children {
height: 250px;
margin-top: calc(50%-125px);
}

Tables and table-cell method

Some would argue that table/table-cell can resolve this issue.

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

Although CSS does not have semantics and it will completely validate (PROS), some have problems using table properties (not tags, though) for non tabular data (CONS). This method could also incur in performance issues on CSS3 animations. Also, it does not work on floated elements.

Inline block method

PROS: This method works great to avoiding blurred pixels, and it doesn’t make use of vendor prefixes.
CONS: but it is far tricker and requires greater sintaxis than the other methods.


.parent {
  text-align: center;
  width: 200px;
  height: 200px;
}

.parent:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.children {
  display: inline-block;
  width: 120px;
  height: 101px;
  vertical-align: middle;
}

Here’s a Codepen example:
http://codepen.io/lucasmotta/pen/hBcEw

Absolute positioning method

In this example we’re using img tags to create galleries. Having an HTML like:

<div class="parent">
      <img src="http://lorempixel.com/200/150/cats/1">
</div>

could be solved by:

.parent {
  width: 10%; /* 1 */
  position: relative; /* 1 */
  border: 1px solid silver;
}

/**
 * Making figure frame always squared 
 * Keeping 1:1 ratio with padding hack
 */
.parent:before {
  content: '';
  display: block;
  padding-top: 100%;
}

/**
 * Absolutely positioned image
 * 1. Sticking to side
 * 2. Absolutely centering 
 * 3. Fluid stuff
 */
img {
  position: absolute;
  top: 0; /* 1 */
  left: 0; /* 1 */
  right: 0; /* 1 */
  bottom: 0; /* 1 */
  margin: auto; /* 2 */
  max-width: 100%; /* 3 */
  height: auto; /* 3 */
}

And this methods extends to a gallery in list form by making the ul the parent and the li tags de children. Or even better, li tags being parent and figure tags being the children.

This Codepen example goes for it!
http://codepen.io/HugoGiraudel/pen/ucKEC

The Flexbox solution

From css-tricks:

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

.parent{
display: flex;
align-items: center;
justify-content: center;
height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

I haven’t tried this out myself, but looks like it is extremely easy. Also try out with justify-content: space-between to align left and right and distribute the white space among the middle elements.

This is an elaborate community curated list on github on bugs and workarounds of this flex stuff, but I’m guessing the spec will continune to evolve and vendors will adapt to this.


Well there, I hope to have put together some of the most common hacks to vertical alignment. Now, chose which one is better for you.

Javea summer

Next Article

Javea summer

No Comments

Cancel