Center div in div vertically and horizontally, position absolute

Question

So I want to center "innerDiv1" vertically and horizontally in "outerDiv".

"innerDiv1" has to be position absolute, so "innerDiv2" can over lap it.

I have tried line-height, this doesn't work because "outerDiv" can change size. Line-height doesn't react to percentage the way I want it to.

Here's my snippet:

html, body {
  margin: 0;
}

.wrapper {
  background: lightblue;
  width: 300px;
  height: 300px;
}

.outerDiv {
  background: red;
  height: 50%;
  width: 50%;
}

.innerDiv1 {
  background: seagreen;
  position: absolute;
}

.innerDiv2 {
  background: rgba(255,255,255,0.5);
  height: 100%;
}

<div class="wrapper">
  <div class="outerDiv">
    <div class="innerDiv1">Hello World!</div>
    <div class="innerDiv2"></div>
  </div>
</div>

Thanks for your help.

I suggest you search google... I often find myself using [this](https://css-tricks.com/centering-css-complete-guide/) reference. — Trevor Clarke, May 14 '18 at 15:48
@PraveenKumar I didnt even check if it worked... sorry.. Thanks for that! — Trevor Clarke, May 14 '18 at 15:52
It is `.outerDiv{display: flex; justify-content: center; align-items: center;}`. — deEr., May 14 '18 at 15:56
@Yorick You haven't given the `top` and `left` values. There's an ultimate reference given by Trevor Clarke. Have a look at that. This is indeed a dupe. — Praveen Kumar Purushothaman, May 14 '18 at 15:57
Try adding "width: 90px; height: 20px; top:10%; left:3%;" to .innerDiv1. It will do the trick. — Harmeet Singh Bhamra, May 14 '18 at 16:01
@Yorick I have removed it... But let me answer the question myself. I said it's possible using `top` and `left`. Let me show you. — Praveen Kumar Purushothaman, May 14 '18 at 16:03
@AjAX. Thanks for your suggestion, however. the "innerDiv2" seems to dissapear when i apply your suggested code. Thanks — Yorick, May 14 '18 at 16:03
Have a look at this http://jsbin.com/jejibepiha/edit?html,output — Harmeet Singh Bhamra, May 14 '18 at 16:07

score 3 · Accepted Answer · answered May 14 '18 at 16:07

See for yourself. See the comments in the CSS on what you need to include.

html, body {
  margin: 0;
}

.wrapper {
  background: lightblue;
  width: 300px;
  height: 300px;
  position: relative; /* 1. Add this. */
}

.outerDiv {
  background: red;
  height: 50%;
  width: 50%;
  position: absolute;
  top: 25%; /* 2. Add this. */
  left: 25%; /* 3. Add this. */
}

.innerDiv1 {
  background: seagreen;
  position: absolute; /* 4. Add this. */
  top: 50%; /* 5. Add this. */
  left: 50%; /* 6. Add this. */
  transform: translate(-50%, -50%); /* 7. Add this. */
  text-align: center; /* 8. Add this if you want the text to be centered. */
}

.innerDiv2 {
  background: rgba(255, 255, 255, 0.5);
  height: 100%;
  top: 50%;
  left: 50%;
}

<div class="wrapper">
  <div class="outerDiv">
    <div class="innerDiv1">Hello World!</div>
    <div class="innerDiv2"></div>
  </div>
</div>

score -1 · Answer 2 · answered May 14 '18 at 16:12

-1

Add this to your css:

.outerDiv {
  position: relative;
}

.innerDiv1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

answered May 14 '18 at 16:12

cup_of

6,397
9
47
94

Center div in div vertically and horizontally, position absolute

2 Answers2