Vertical alignment of content inside div

Warning: Undefined variable $time_difference in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 324 Warning: Undefined array key 0 in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 336 Warning: Undefined variable $time_difference in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 324 Warning: Undefined array key 0 in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 336 Warning: Undefined array key 17 in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 214 Warning: Trying to access array offset on null in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 214 Warning: Undefined array key 17 in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 237 Warning: Trying to access array offset on null in /usr/home/smartgroup/domains/blog.tulikowski.com/public_html/wp-content/plugins/similarity/similarity.php on line 237

If you have a dynamic content on your page, sometimes is the case to align this content vertically in the div container. As you know, this could be painful. However with this short CSS styling you can reach this goal quite easy.

.container {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Working example

Update: Browser Support

Broken up by “version” of flexbox:

• (new) means the recent syntax from the specification (e.g. display: flex;)
• (tweener) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
• (old) means the old syntax from 2009 (e.g. display: box;)

Chrome

• 21+ (new)
• 20- (old)

Safari

• 3.1+ (old)
• 6.1+ (new)

Firefox

• 2-21 (old)
• 22+ (new)

Opera

• 12.1+ (new)

IE

• 10 (tweener)
• 11+ (new)

Android

• 2.1+ (old)
• 4.4+ (new)

iOS

• 3.2+ (old)
• 7.1+ (new)