Centering image inside flexbox

HTML & CSS
6

You can eliminate that extra wrapping div around the image by setting those properties on the image itself.

In that case you would really only be using flex to vertically center the image.

Width + min/max widths + auto margins on the img would then just need flex to vertically center it.

Drag your browser window all around with the following code and you will see what I meant above when I said…

“And all that would depend on whether or not the parent .box has enough space to actually make the image appear centered each way.”


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Flex Item Image</title>
<style>
.box {
   width:80%;
   min-height:80vh;
   margin:auto;
   border:1px solid;
   display: flex;
   align-items: center;
   justify-content: center; /* not really needed with auto margin on img*/
}
.box img {
   display: block;
   width: 80%;
   min-width:100px;
   max-width: 350px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}
</style>

</head>
<body>

<div class="box">
   <img src="http://via.placeholder.com/350x250" width="350" height="250" alt="missing image">
</div>

</body>
</html>
1 Like