Center text over an image in flexbox

user_1824253 0
Viewed 48110

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>

flexbox css html
6 Answers

Responsive centered text content over image

.height-100vh {
  height: 100vh;
  background: lightgrey;
}

.center-aligned {
  display: flex;
  align-items: center;
  justify-content: center;
}

.background-image {
  opacity: .3;
  width: 100%;
  object-fit:cover; 
  height: 100%;
}

.text {
  position: absolute;
  color: white;
  font-family:  'Gill Sans', 'Gill Sans MT';
  background: darkcyan;
  padding: 20px;
}
<section class="height-100vh center-aligned">
  <img class="background-image" src="https://www.humanesociety.org/sites/default/files/styles/768x326/public/2018/08/kitten-440379.jpg?h=f6a7b1af&itok=vU0J0uZR" />
  <div class="text">I'm in center</div>
</section>

user_65444600
Related