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

Multiline content
which is aligned verically
inside div

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)
Vertical alignment of content inside div
Tagged on:                 

2 thoughts on “Vertical alignment of content inside div

  • 2015/10/08 at 10:34
    Permalink

    Jak to ma się do przeglądarek np. IE 10, 9 ?

    Reply
    • 2015/10/08 at 10:42
      Permalink

      Zaktualizowałem post o informację dotyczącą kompatybilności z przeglądarkami.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Social Widgets powered by AB-WebLog.com.