Move div under centered div

Question

As you can see in the image the element with the class “inner“ is centered inside the “outer“ div, for that I used this stack overflow post. I have tried getting the Hello World paragraph to appear underneath the centered div without cheating with the margin property, but no success.

.outer {
  position: relative;
  height: 80%;
  width: 100%;
}
.inner {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}

<div class="outer">
  <div class="inner"></div>
  <p>Hello World</p>
</div>

It is under the div: https://jsfiddle.net/aojfa5wh/1/ – Michelangelo Dec 20 '16 at 21:48 — Michelangelo, Dec 20 '16 at 21:48

Jon Uleis · Accepted Answer · 2016-12-21T16:14:39.600

7

If you're centering multiple elements, put them inside one container and center that container, like so:

html, body {
  height: 100%;
}
.outer {
  background: blue;
  position: relative;
  height: 100%;
  width: 100%;
}
.center {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  /* offset margin by 1/2 height of addtl elements */
  margin-top: 23px;
}
.inner {
  background: lightblue;
  width: 300px;
  height: 100px;
}
p {
  background: lightgray;
  text-align: center;
  margin: 16px 0 0;
  height: 30px;
  /* 30 + 16 = 46 ==> 46 / 2 = 23 (offset) */
}

<div class="outer">
  <div class="center">
    <div class="inner"></div>
    <p>Hello World</p>
  </div>
</div>

edited Dec 21 '16 at 16:14

answered Dec 20 '16 at 21:49

Jon Uleis

17,693
2
33
42

I second this. Also, just some words of advice, take it or leave it, ditch relative and absolute positioning in this situation. This isn't what it is for. Use `margin: 0px auto` or any alternatives to it. – Max Baldwin Dec 20 '16 at 21:53
You could also use `display:inline-block;` on `.inner`, and use `text-align:center;` same as for `p` – myfunkyside Dec 20 '16 at 21:59
@myfunkyside & MaxBaldwin: Both of those solutions are for horizontal centering. The transform/50/50 trick -- which the post author was already using -- does both horizontal and vertical (which is often less simple in CSS). – Jon Uleis Dec 20 '16 at 22:01
@JonUleis What I was going for was to keep the .inner element locked into place and display any following element underneath it. With your solution the .inner div get's pushed upwards depending on the height of the Hello World paragraph. – André Kuhlmann Dec 21 '16 at 16:06
1

@AndréKuhlmann I've updated my answer to show you how to do this. It's a bit less automatic, but if you calculate the height of the additional elements (in this case, 30px height + 16px margin on the paragraph = 46px) and then half it (23px), you can offset the wrapper container by that amount of margin to re-center as if the additional element wasn't there. Hope that helps. – Jon Uleis Dec 21 '16 at 16:16

score 0 · Answer 2 · answered Dec 20 '16 at 21:52

0

I would recomend something like this : https://jsfiddle.net/jw6vcxh7/

.outer {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border: 1px solid red;
  width: 500px;
  height: 800px;
}

.inner {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  border: 1px solid blue;
}

answered Dec 20 '16 at 21:52

Rares Hideg

394
3
11

This is a good example of using `margin: 0px auto`. Although you should consider the structure @jon has purposed. – Max Baldwin Dec 20 '16 at 21:54
1

as for Jon's example, and also the main example, i am against using absolute or relative positioning and also transforming for such simple tasks but also this is just an answer for this question alone and might not have a good impact on the overall project. – Rares Hideg Dec 20 '16 at 21:56

score 0 · Answer 3 · answered Dec 20 '16 at 22:06

Was your intention to have it both vertically and horizontally centered?

If so you can add

.outer p {
  position: relative;
  top: 50%;
  left: 50%;
  display:block;
}

Or if you need it just horizontially centered then the following should do the trick...

.outer {
  position: relative;
  height: 80%;
  width: 100%;
  border: 1px solid red;
}
.inner {
  position: relative;
  height: 100px;
  width: 100px;
  display: block;
  margin: 0px auto;
  vertical-align: middle;
  border: 1px solid blue;
}
.outer p {
  display: block;
  margin: 0px auto;
  width: 80%;
  text-align: center;
  background: #ccc;
  }
}

A good reference for centering divs can be found here http://vanseodesign.com/css/vertical-centering/

Move div under centered div

3 Answers3