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

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