How do I center an image in flexbox?

Question

How do I center an image in flex box? I tried using justify-content and align-items to center but it didnt work.

In the code down below, i set my to a green box. I want to center the green box within the red box. Any help?

.body{
 display: flex;
 flex: 1;
 width: 250px;
 height: 250px;
 background-color: blue;
 padding: 10px;
}
.innerDiv1{
 flex: 1;
  background-color:red;
}
.innerDiv2{
 flex: 1;
 background-color: yellow;
}
.innerDiv3{
flex: 1;
 width: 50px;
 height: 50px;
 background-color: green;
 align-items: center; /*does not work*/
 justify-content: flex-end; /*does not work*/
 
}

<div class = "body">
 <div class = "innerDiv1">
   <div class = "innerDiv3">
   </div>
 </div>
 <div class = "innerDiv2">
 </div>
</div>

Danziger · Accepted Answer · 2020-05-07T18:39:57.760

You need to add display: flex, align-items: center and justify-content: center to the parent of the green box (.innerDiv1), not to the green box (.innerDiv3) itself:

.body {
  display: flex;
  width: 250px;
  height: 250px;
  background-color: blue;
  padding: 10px;
}

.innerDiv1 {
  flex: 1;
  background-color:red;
  /* HERE  */
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerDiv2 {
  flex: 1;
  background-color: yellow;
}

.innerDiv3 {
  width: 50px;
  height: 50px;
  background-color: green;
}

<div class="body">
  <div class="innerDiv1">
    <div class="innerDiv3">
    </div>
  </div>

  <div class="innerDiv2"></div>
</div>

Alternatively, you could add display: flex to the parent (.innerDiv1) and align-self: center + margin: 0 auto to the green box (.innerDiv3):

.body {
  display: flex;
  width: 250px;
  height: 250px;
  background-color: blue;
  padding: 10px;
}

.innerDiv1 {
  flex: 1;
  background-color:red;
  /* AND HERE  */
  display: flex;
}

.innerDiv2 {
  flex: 1;
  background-color: yellow;
}

.innerDiv3 {
  width: 50px;
  height: 50px;
  background-color: green;
  /* AND HERE  */
  align-self: center;
  margin: 0 auto;
}

<div class="body">
  <div class="innerDiv1">
    <div class="innerDiv3">
    </div>
  </div>

  <div class="innerDiv2"></div>
</div>

score 3 · Answer 2 · answered May 07 '20 at 18:30

You have to apply display:flex to the parent and the justify-content and align-items need to be set on the parent as well

You can have a look at some more details regarding the alignment here: Align Items in Flexbox

.body{
  display: flex;
  flex: 1;
  width: 250px;
  height: 250px;
  background-color: blue;
  padding: 10px;
}
.innerDiv1{
  flex: 1;
  background-color:red;
  display: flex;
  align-items: center;
  justify-content: center;
}
.innerDiv2{
  flex: 1;
  background-color: yellow;
}
.innerDiv3{
  width: 50px;
  height: 50px;
  background-color: green;
}

<div class = "body">
 <div class = "innerDiv1">
   <div class = "innerDiv3">
   </div>
 </div>
 <div class = "innerDiv2">
 </div>
</div>

score 0 · Answer 3 · answered May 07 '20 at 18:40

You should align the green div in the red div instead, i.e to centre a child element in its parent, you should align the content of the parent div instead of the child div (in your case) by adding align-items: center; and justify-content: center; to the red div as so:

.body{
 display: flex;
 flex: 1;
 width: 250px;
 height: 250px;
 background-color: blue;
 padding: 10px;
}
.innerDiv1{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    background-color: red;
}
.innerDiv2{
 flex: 1;
 background-color: yellow;
}
.innerDiv3{
 width: 50px;
 height: 50px;
 background-color: green;
 
}

<div class = "body">
 <div class = "innerDiv1">
   <div class = "innerDiv3">
   </div>
 </div>
 <div class = "innerDiv2">
 </div>
</div>

How do I center an image in flexbox?

3 Answers3