CSS3 Tricks to Align Content Vertically

The last method to vertical centering is by using Flexbox. Flexbox is a new module in CSS3. It offers a more straightforward method for aligning content. To center the content vertically in flex box, simply add align-items: center;as follows, and that’s it.

http://jsfiddle.net/tfirdaus/tjn66evy/embedded/result,css,html/

Keep in mind that Flexbox some browsers only support partials feature of the Flexbox module such as Internet Explorer 10, Safari, 6, and Chrome 27 and below. Hence, similar to the trick with CSS3 Transform, make sure that the effect falls nicely in these browser.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s