How do I vertically center a div within a div covered by a background image?

Question

// css
.table-art {
  background-image:url("../img/table-decorated1.jpg");
  background-size: cover;
  width: auto;
  height: 500px;
}

.box-test {
  border: 5px solid red;
  width: 150px;
  height: 50px; 
  margin: auto;
}

// html
<div class="table-art">
    <div class="box-test">
        
    </div>
</div>

The red box is placed like this when I use the css. However, if I'm not wrong, due to the 'margin: auto' it should superposition the box, from left right down and up within the div with the picture, however it only seems to be doing it for left and right, horizontally it works fine, however I want to have this box vertically centered as well.

.box-test {
  border: 5px solid red;
  width: 150px;
  height: 50px; 
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
}

I tried to have it centered using the ol' top and left 50%. Which in theory should put it straight in the center. However, as you can see, it's slightly off to the down and right. Increasing the size of the box div will always go right and down, but it doesn't seem to take into account the left and upper part of itself.

I tried also using right and down: 50% but it's always in that particular location. It's like the website thinks this is really the center, is it due to the image?

I've tried looking at different solutions such as using padding but that didn't work either, what should I do to make sure it's box size always remains in the center within this filled out div?... Or, is there a better way to doing this and I'm just hurting myself for nothing? What's the deal here?

*The image's size in question is 765x510 Also using firefox navigator, but chrome also does the same thing.

Thank you for reading, any help will be very much appreciated!

score 1 · Answer 1 · answered Dec 10 '21 at 16:32

1

Add display flex to the parent div and then margin:auto to the inner div

answered Dec 10 '21 at 16:32

Jibin.Jay

332
1
5

score 1 · Accepted Answer · answered Dec 10 '21 at 16:33

You could use flex or grid - like

.table-art {
  background-image:url("../img/table-decorated1.jpg");
  background-size: cover;
  width: auto;
  height: 500px;

  /* center items */
  display: grid;
  place-items: center;
}

.box-test {
  border: 5px solid red;
  width: 150px;
  height: 50px; 
  margin: auto;
}

score 1 · Answer 3 · answered Dec 10 '21 at 16:42

CSS

METHOD 1 :

By using the position relative for parent div and absolute for child element you can easily cneter the child element using top and left props of css ( of child with absolute position ) as 50% and finally center the child element with transform prop

/*Using positioning and transform method*/

  .table-art {
    background-image: url("../img/table-decorated1.jpg");
    background-size: cover;
    width: auto;
    height: 500px;
    background-color: blue;
    position: relative;
  }
  .box-test {
    border: 5px solid red;
    width: 150px;
    height: 50px;
    position: absolute;
    left: 50%;
    top:50%;
    transform:  translate(-50% , -50%);
  }

METHOD 2 :

Using the grid or flex you can easily center the child div by setting the parent div's display to flex or grid and then using the justify-content ( for flex and place-content for grid ) and aligning the div vertically center with align-items to center ( grid doesn't needs this prop to center the content ! )

/*Using flex or grid to center the content*/

  .table-art {
    background-image: url("../img/table-decorated1.jpg");
    background-size: cover;
    width: auto;
    height: 500px;
    background-color: blue;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .box-test {
    border: 5px solid red;
    width: 150px;
    height: 50px;
  }

HTML

<div class="table-art">
  <div class="box-test">
  </div>
</div>

score 0 · Answer 4 · answered Dec 10 '21 at 16:40

Just add below to your .table-art class

  display:flex;
  align-items: center

.table-art {
  background-image: url("https://picsum.photos/300/300");
  background-size: cover;
  width: auto;
  height: 500px;
  display:flex;
  align-items: center
}

.box-test {
  border: 5px solid red;
  width: 150px;
  height: 50px;
  margin: auto;
}

<div class="table-art">
  <div class="box-test">

  </div>
</div>

How do I vertically center a div within a div covered by a background image?

4 Answers4