Why Doesn't Flex Direction Column With Align-items=center Center Image Properly

Question

I stumbled upon an issue with image centering within a flexbox with direction:column. Imagine you have two elements within a flexbox, where the first one contains an image:

Solution 1:

Because your <div> that contains the image (and has align-self: center on it) is by default a block-level element, and has a width of 100% by default. As such, it is constrained in relation to the parent.

In order to have your image centered correctly, you'll want to add display: contents with:

container .image-container {
  display: inline;
}

This can be seen in the following:

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.container.image-container {
  flex: 1;
  align-self: center;
  display: contents;
}

.container.image-container.img {
  height: 100%;
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

Solution 2:

The issue is that you are using an SVG with no intrinsic dimension and only an intrinsic ratio so it's like your image has a width equal to 0 which make its centred container with a width equal to 0, too.

Here is before using height:100%

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  align-self: center;
  border:2px solid blue;
}

.img {
  /*height: 100%;*/
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

After setting height:100% the image will fill all the space and will keep its ratio but you will have an overflow because the browser will not go back to calculate the width of the container again:

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  align-self: center;
  border:2px solid blue;
}

.img {
  height: 100%;
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" ></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

To avoid this give the image a width and make sure to add min-height:0 to the container to allow it to shrink

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  align-self: center;
  border:2px solid blue;
  min-height:0;
}

.img {
  height: 100%;
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"width="250"></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

If you were initially using an image with intrinsic dimension you won't have this issue and you don't need to define a width. You will only need to add min-height:0 to avoid the overflow:

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  align-self: center;
  border:2px solid blue;
  min-height:0;
}

.img {
  height: 100%;
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://picsum.photos/id/1/400/400"></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

Note that the above doesn't work the same way in Firefox and you will need to add text-aling:center to make sure it works the same everywhere:

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  align-self: center;
  border:2px solid blue;
  text-align:center;
  min-height:0;
}

.img {
  height: 100%;
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://picsum.photos/id/1/400/400"></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

You will notice that the difference is related to the width calculation of the container which a bit complex due to the use of height:100%

Things may get worse if the size of the image is very small:

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  align-self: center;
  border:2px solid blue;
  text-align:center;
  min-height:0;
}

.img {
  height: 100%;
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://picsum.photos/id/1/50/50"></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

In Firefox text-align:center will do nothing and you may need a nested flexbox container

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  align-self: center;
  justify-content:center;
  border:2px solid blue;
  display:flex;
  min-height:0;
}

.img {
  height: 100%;
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://picsum.photos/id/1/50/50"></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

The below is almost the same issue you were having with the initial SVG that can fixed with this same code but it won't remove the overflow:

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  align-self: center;
  display:flex;
  justify-content:center;
  border:2px solid blue;
}

.img {
  height: 100%;
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" ></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

Another intresting thing to note is that your initial code may work fine if you add height:100% to the container making the calculation of the nested height easier:

.container {
  height: 300px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  align-self: center;
  border:2px solid blue;
  box-sizing:border-box;
  height:100%;
}

.img {
  height: 100%;
  display:block;
}

.another-flex-child {
  flex: none;
  background-color: red;
}

.spacer {
  height: 20px;
}

<divclass="container"><divclass="image-container"><imgclass="img"src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" ></div><divclass="another-flex-child">
    Random content here
  </div></div><divclass="spacer"></div><divclass="container"><divclass="image-container"><div>Properly centered content</div></div><divclass="another-flex-child">
    Random content here
  </div></div>

Solution 3:

Add the justify-content like below:

.image-container {
    flex: 1;
    align-self: center;
    justify-content:center;
}

it should works

Html5 Tech

Why Doesn't Flex Direction Column With Align-items=center Center Image Properly

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Why Doesn't Flex Direction Column With Align-items=center Center Image Properly"