To vertically and horizontally center text in a div

Use the following to vertically and horizontally center text in a div using display: flex.

Hello World!
This is line 2…

div#my_flex_example{
height: 150px;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
}

div{
  height: 150px;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

For maximum compatibility, add the following:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

ref: http://stackoverflow.com/questions/16280040/css3-flexbox-display-box-vs-flexbox-vs-flex

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