Center two divs within parent div, but they're on top of each other

March 1, 2023

I have blurred image, as well as a span inside a parent div. I’d like for them both to be centered within the parent div, with the span being over the image. However as of right now, the span will always be next to the image.

Here’s what I have right now:

.thumbnail {
    height: 10em;
    width: 10em;
    background-size: cover;
}

.sensitive {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="folder row justify-content-md-center mt-4">
    <div class="col col-md-2 d-flex justify-content-md-center">
        <div class="thumbnail overflow-hidden d-flex aligns-items-center">
            <div class="thumbnail sensitive" style="background-image:url('https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png')">
            </div>
              <span class="align-middle">
              Warning
              </span>
        </div>
    </div>
</div>

>Solution :

The trick is to add an absolute to the div you want to center ontop of the other one: https://www.w3schools.com/howto/howto_css_image_text.asp

For resizing of the picture you can change the container

.thumbnail {
    height: 10em;
    width: 10em;
    background-size: cover;
}

.sensitive {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="folder row justify-content-md-center mt-4 {{#if @index}}d-none{{/if}}">
    <div class="col col-md-2 d-flex justify-content-md-center">
        <div class="container">
            <img class="thumbnail sensitive" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" alt="Snow" style="width:100%;">
               <div class="centered">Warning</div>
        </div>
    </div>
</div>