How would I vertically center child divs?

Question

I was trying out some stuff in CSS on Codepen (jst to get more familiar with CSS), and ran into a problem where I could not vertically center the divs. This confused me, as I was able to move all of the child divs into the center.Thanks for any help!

https://codepen.io/Shayodonn10/pen/xWKgda

.bg{
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  width: 800px;
  height: 800px;
  left: 50%;
}
.red {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  width: 100px;
  height: 75px;
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

.blue{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);;
  top: 50px;
}

.green{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
  top: 50px;

}

.stick{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30px;
  height: 80px;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  top: 50px;
}

<div class="bg">
<div class="red" />
<div class="blue" />
<div class="green" />
<div class="stick" />
</div>

I would wrap that in a parent container and `flex` it – happymacarts Mar 07 '18 at 20:38 — happymacarts, Mar 07 '18 at 20:38
Your HTML is thoroughly invalid. – Rob Mar 07 '18 at 20:45 — Rob, Mar 07 '18 at 20:45

score -1 · Answer 1 · answered Mar 07 '18 at 20:41

with a few changes to your css and adding a wrapper div (and fixing semantics) you can achieve the effect with flex

More about FLEX

There a ton of good guides on flex but this is my GOTO

.bg{
  display: flex;
  background-color: black;
  width: 800px;
  height: 800px;
  justify-content:center;
  flex-direction:column;
}
.red {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  width: 100px;
  height: 75px;
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

.blue{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);;
  top: 50px;
}

.green{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
  top: 50px;

}

.stick{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30px;
  height: 80px;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  top: 50px;
}

<div class="bg">
  <div class="container">
    <div class="red"></div>
    <div class="blue" ></div>
    <div class="green" ></div>
    <div class="stick" ></div>
  </div>
</div>

score -1 · Answer 2 · answered Mar 07 '18 at 20:43

Vertical centering has always been an issue in CSS. But there are a few options you can use to center it.

Option 1

Using flexbox:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Option 2

Using position:absolute with a known height of an element:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

Option 3

Using position:absolute with an unknown height of an element:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Option 4

This one is not recommendet! Using tables:

.parent_wrap {
  display: table;
}
.parent {
  display: table-cell;
  vertical-align:middle;
}

score -1 · Answer 3 · answered Mar 07 '18 at 20:48

There were some problems with your pen.

divs are not self-closing. You must have a closing tag
divs are already block level, so you don't need to specify that

You can do vertical centering using flexbox. I took a shot here - https://codepen.io/chetansastry/pen/JLPWLY

score -2 · Answer 4 · answered Mar 07 '18 at 20:40

Something to the affect like this:

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

HTML

<div class="cn"><div class="inner">your content</div></div>

How would I vertically center child divs?

4 Answers4