Vertical alignment of content inside div

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)