How can I center my two blue boxes here?

Question

I would like to center my two blue boxex shown in the example below using CSS Flexbox. I tried to center them with both align-items: center; and justify-content: center; but it is not working.

Thanks for the help.

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 500px;
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#first {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  display: inline-block;
  background-color: red;
}

#loadingBar {
  width: 100%;
  height: 20px;
  background-color: purple;
}

#inner {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: blue;
}

<div id="container">
  <div id="first">
    <div id="inner"></div>
    <div id="inner"></div>
  </div>
  <div id="loadingBar"></div>
</div>

Declare the `flex-box` rules to the containing element of the two boxes you need to align center, `flex-box` has a direct parent-to-child sort of relationship. To achieve the intended behaviour, using `flex-box`, `display: flex`, and any flex alignment properties, should be declared on the parent element. — UncaughtTypeError, Jan 03 '18 at 19:48
@UncaughtTypeError I have tried wit that method. I added ```display: flex; align-items: center; justify-content: center;``` to the parent div with id #first for the two inner divs with id #inner, but they are not working. I have updated my code. Please see. — Zip, Jan 03 '18 at 20:29
Your `display: flex` rule on `#first` is being over-qualified by another `display` rule (`display: inline-block`) further down the cascade order for that (`#first`) selector. Remove it, `display: inline-block` on `#first`, to observe the intended behaviour. — UncaughtTypeError, Jan 03 '18 at 20:38

Liam · Accepted Answer · 2018-01-03T20:46:12.883

I added to the "First" Class display:flex align-items: center;Then margin for the boxes

body {
   margin: 0;
   padding: 0;
  }
  #container {
   width: 100%;
   height: 500px;
   background-color: green;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
  }
  #first {
   width: 50%;
      display: flex;
     background-color: red;
      align-items: center;
      justify-content: center;
   background-color: red;
  }
  #loadingBar {
   width: 100%;
   height: 20px;
   background-color: purple;
  }
  #inner {
    width: 50px;
    margin-left: 1%;
    margin-right: 1%;
    height: 50px;
    display: inline-block;
    background-color: blue;
  }

<div id="container">
  <div id="first">
   <div id="inner"></div>
       <div id="inner"></div>
       <div id="inner"></div>
   <div id="inner"></div>
  </div>

  <div id="loadingBar"></div>
 </div>

I do not want to add any extra div though. Is it possible? – Zip Jan 03 '18 at 20:23 — Zip, Jan 03 '18 at 20:23
@Zip Yes sure, I've Edited my answer, check it out. – Liam Jan 03 '18 at 20:47 — Liam, Jan 03 '18 at 20:47

score 0 · Answer 2 · answered Jan 03 '18 at 19:49

0

Use the display: flex and justify-content: center on the element containing the blue boxes. Justify content centers the elements inside it, if you use it in the blue box it will center content inside the blue box, if any.

answered Jan 03 '18 at 19:49

sarthak

500
9
19

How can I center my two blue boxes here?

2 Answers2