How do I center an image in flexbox? [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
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>

Answer 1

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>

Answer 2

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>

Answer 3

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>