How would you center three child divs inside of a parent div with css?

Question

I am beginning to learn css. I have three divs that are contained inside of a parent div. The code to all three child divs are the same yet the third div drifts off to the side. How would one go about centering these divs inside of the parent element?

The parent div has been outlined in black to show it's relative position.

#parent {
  border-style: solid;
  height: 300px;
  width: 2000px;
}

#blueBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
  padding: 10px;
  float: left;
  display: inline-block;
}

#skyBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
  padding: 10px;
  float: left;
  display: inline-block;
}

#rainBowBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
  padding: 10px;
  float: left;
  display: inline-block;
}

<div id="parent">
  <div id="blueBox">
  </div>
  <div id="skyBox">
  </div>
  <div id="rainBowBox">
  </div>
</div>

Does this answer your question? [Center child divs inside parent div](https://stackoverflow.com/questions/13091433/center-child-divs-inside-parent-div) or https://stackoverflow.com/questions/28987733/align-to-center-child-divs-inside-parent-div?r=SearchResults&s=2|149.5710 or https://stackoverflow.com/questions/19946504/how-to-center-align-a-child-div-inside-a-parent-div-with-css?r=SearchResults&s=7|133.5861 or https://stackoverflow.com/questions/45475214/centering-two-child-divs-inside-parent-div?r=SearchResults&s=16|112.0796 or .... — Rob, Feb 03 '20 at 03:42

score 1 · Answer 1 · answered Feb 03 '20 at 05:17

The easiest and best way out is Flexbox. You can try as given below:

I have taken this from w3schools, here's the source: Source

You can add or remove divs and it will adjust accordingly.

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
</div>

score 0 · Answer 2 · answered Feb 03 '20 at 03:27

0

You can do this easily using flexbox. Run the snippet below and see if the result is what you want.

#parent {
  border-style: solid;
  height: 300px;
  width: 2000px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#blueBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  padding: 10px;
}

#skyBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  padding: 10px;
}

#rainBowBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  padding: 10px;
}

<div id="parent">
  <div id="blueBox"></div>
  <div id="skyBox"></div>
  <div id="rainBowBox"></div>
</div>

answered Feb 03 '20 at 03:27

djolf

1,196
6
18

Wil it work in older browsers? – Vicky Gonsalves Feb 03 '20 at 03:30
it works on all major browsers, including IE10 and above. Check this link: [caniuse](https://caniuse.com/#search=CSS%20Flexible%20Box%20Layout%20Module) – djolf Feb 03 '20 at 03:33
This was exactly what I was trying to accomplish. Thank you! – AshMKay Feb 03 '20 at 05:16
would you accept my answer? – djolf Feb 03 '20 at 06:33

Vicky Gonsalves · Answer 3 · 2020-02-03T03:42:20.250

Apart from using flexbox peoperty, there is an old school trick for it by using box-sizing property.

#parent {
  border-style: solid;
  height: 200px;
  width: 1400px;
}

#blueBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  padding: 10px;
  box-sizing:border-box;
  float:left;
  margin-top: 50px;
  margin-left: 50px;
  display: inline-block;
}

#skyBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  padding: 10px;
  box-sizing:border-box;
  float:left;
  margin-top: 50px;
  margin-left: 50px;
  display: inline-block;
}

#rainBowBox {
  border-style: solid;
  border-width: 3 px;
  border-color: blue;
  height: 100px;
  width: 400px;
  padding: 10px;
  box-sizing:border-box;
  float:left;
  margin-top: 50px;
  margin-left: 50px;
  display: inline-block;
}

<div id="parent">
  <div id="blueBox"></div>
  <div id="skyBox"></div>
  <div id="rainBowBox"></div>
</div>

score -1 · Answer 4 · answered Feb 03 '20 at 03:29

I personally recommend to use flex-box for centering html elements.

For a flex component (default flex-direction: row), align-items: center; to vertically center its children, justify-content: center; to horizontally center children.

Assume you have

<div id="parent">
  <div id="blueBox"></div>
  <div id="skyBox"></div>
  <div id="rainBowBox"></div>
</div>

Apply the following css to #parent

#parent {
  display: flex;
  align-items: center; // vertically center children
  justify-content: center; //horizontally center children
}

More about align-items here and here. More about justify-content here and here.

score -1 · Answer 5 · answered Feb 03 '20 at 03:30

just use percentages instead of pixels for width and automatic 0 margin to center content.

#parent{
    width: 100%
    margin: 0 auto;
}

#child1{
    width: 33%
    margin: 0 auto;
}

#child2{
    width: 33%
    margin: 0 auto;
}

#child3{
    width: 33%
    margin: 0 auto;
}

score -1 · Answer 6 · answered Feb 03 '20 at 04:03

-1

you can easily use flex on your parent and use center on it too

<div id="parent" style="display:flex;align-items:center;margin:0 auto;">
  <div id="blueBox"></div>
  <div id="skyBox"></div>
  <div id="rainBowBox"></div>
</div>

answered Feb 03 '20 at 04:03

samuel njoo

11
3

How would you center three child divs inside of a parent div with css?

6 Answers6