How do to center a div over a div

Question

This is what I am trying to achieve. I tried using absolute position and it seemed to work on one screen size but doesn't work for others.

.countdown {
  width: 200px;
  background: #b02d1b;
  margin: 0;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  padding: 5px;
  position: absolute;
  z-index: 1;
}

.countdown-bg {
  width: 100%;
  border-top: solid 1px #ccc;
  position: absolute;
  margin: 12px;
}

<div class="countdown"> Final Hours </div>
<div class="countdown-bg"></div>

use text-align:center for centering horizontally, and position relative top to positioning over the line. — Roy Bogado, Jun 05 '18 at 16:39
We need to see your code, there are multiple ways of accomplishing this — Kevin Jantzer, Jun 05 '18 at 16:39
As others have mentioned, we can't troubleshoot your exact situation without seeing your code. You could create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — trevorp, Jun 05 '18 at 16:41
Did you try `transform: translate(-50%,-50%);`? See [this](https://stackoverflow.com/questions/17573324/dynamically-center-div-over-another-div) answer for example. — fen1x, Jun 05 '18 at 16:43

Denis Jr · Accepted Answer · 2018-06-05T17:38:00.797

I think I have a solution for your question:

.divOuter {
  background-color: #cccccc;
  width: 100%;
  height: 2px;
  position: absolute;
}

.divInner {
  background-color: #cc0000;
  width: 130px;
  height: 20px;
  position: relative;
  top: -12px;
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
  font-family: Verdana;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 10px;
  border: 4px solid #ffffff;
}

<div class="divOuter">
  <div class="divInner">FINAL HOURS!</div>
</div>

Brief explanation:

We have two divs, the second one in the html is on top of the first one. This placement in CSS is called a float.

When we need this effect we use the "position" property of the CSS with values like Absotule and Relative.

In this case, the first Div makes the thin line and the second Div makes the red rectangle.

The "top", "left", "right" and "button" property of the css causes to align the second Div relative to the first. And the property "margin: auto" causes the internal div to be aligned to the center of the external div.

I hope I've helped!

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

Without flexbox

Wrapp one div inside another div. Make the outer div position: relative and the inner div position: absolute. Center the inner div with left and transform

.countdown {
  position: relative;
  border-top: solid 1px #ccc;
  margin: 15px 0;
}

.countdown>.content {
  width: 200px;
  text-align: center;
  background: #b02d1b;
  border-radius: 5px;
  color: #fff;
  padding: 5px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-transform: uppercase;
}

<div class="countdown">
  <div class="content">Final Hours!</div>
</div>

With flexbox

The advantage of using flexbox is that you don't have to set positions and that you can center with justify-content.

.countdown {
  border-top: solid 1px #ccc;
  margin: 15px 0;
  display: flex;
  justify-content: center;
}

.countdown>.content {
  width: 200px;
  text-align: center;
  background: #b02d1b;
  border-radius: 5px;
  color: #fff;
  padding: 5px;
  transform: translateY(-50%);
  z-index: 1;
  text-transform: uppercase;
}

<div class="countdown">
  <div class="content">Final Hours!</div>
</div>

How do to center a div over a div

2 Answers2

Without flexbox

With flexbox