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;