Center text over an image in flexbox

by

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:

enter image description here

For a more detailed explanation of the centering method see:

More Related Contents:

  1. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  2. How to place elements like this
  3. Flexbox code working on all browsers except Safari. Why?
  4. How to center a flex container but left-align flex items
  5. Left column and stacked right column using flexbox CSS [duplicate]
  6. flex property not working in IE
  7. Last margin / padding collapsing in flexbox / grid layout
  8. Equal width flex items even after they wrap
  9. How to center elements on the last row in CSS Grid?
  10. Change div order with CSS depending on device-width
  11. Force flex item to span full row width
  12. input / button elements not shrinking in a flex container
  13. Flexbox and Internet Explorer 11 (display:flex in ?)
  14. Removing margin from flex items when they wrap
  15. ‘position: sticky’ not working when ‘height’ is defined
  16. Calculator keypad layout with flexbox
  17. Flexbox column-reverse in Firefox, Edge and IE
  18. Text not centered with justify-content: center
  19. Flex item should align left, not center, when it wraps
  20. Flexbox affects overflow-wrap behavior
  21. How to align flexbox columns left and right?
  22. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  23. Prevent a child element from overflowing its parent in flexbox [duplicate]
  24. Why isn’t position:sticky with left:0 working inside a scrollable container?
  25. Chrome does not expand flex parent according to children’s content [duplicate]
  26. Flexbox with fixed header and footer and scrollable content
  27. What are the default values for justify-content & align content?
  28. Sizing flex items on the last row
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment