Center text over an image in flexbox

Question

How can I centre align text over an <img> preferably using FlexBox?

body {    margin: 0px;  }    .height-100vh {    height: 100vh;  }    .center-aligned {    display: box;    display: flex;    box-align: center;    align-items: center;    box-pack: center;    justify-content: center;  }    .background-image {    position: relative;  }    .text {    position: absolute;  }

<section class="height-100vh center-aligned">    <img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg" />    <div class="text">SOME TEXT</div>  </section>

Answer 1

To center text over an image you don't need flexbox. Just use CSS positioning properties.

.height-100vh {     height: 100vh;     position: relative;               /* establish nearest positioned ancestor for                                          absolute positioning */ }  .text {     position: absolute;       left: 50%;                        /* horizontal alignment */     top: 50%;                         /* vertical alignment */     transform: translate(-50%, -50%); /* precise centering; see link below */ } 

body {    margin: 0px;  }    .height-100vh {    height: 100vh;    display: flex;           /* establish flex container */    flex-direction: column;  /* stack flex items vertically */    position: relative;      /* establish nearest positioned ancenstor for absolute positioning */  }    .text {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    color: white;    font-weight: bold;  }    .center-aligned {    display: flex;    align-items: center;    justify-content: center;  }

<section class="height-100vh center-aligned">    <img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg/revision/latest?cb=20090904155448" />    <div class="text">SOME TEXT</div>  </section>

Revised Codepen

The code above centers the text both vertically and horizontally over the image:

For a more detailed explanation of the centering method see:

• Element will not stay centered, especially when re-sizing screen