How to make an image center (vertically & horizontally) inside a bigger div?

Question

I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div. How can it be done?I am able to get it centered horizontally by using `text-align: center` for the div. But vertical alignment is the issue..

Answer 1

With the widespread implementation of display: flex vertical centering - even on elements of unknown height is no longer a problem. To center and img (or any other block element) in a containing div (or any other block element) simply apply the following CSS rule to the containing element:

e.g. with this markup:

<div class="container">

<img src="someimage.jpg alt="a useful description">

</div>

use this CSSL

.container {

display: flex;

justify-content: center;

align-items: center;

}

The amazing Rachel Andrews has several great articles at smashingmagazine.com that explain in great detail whats going in with flex alignment. See:

https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/

https://www.smashingmagazine.com/2018/08/flexbox-alignment/

https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/

https://www.smashingmagazine.com/2019/04/display-two-value/

and also on alignment in CSS in general:

https://www.smashingmagazine.com/2019/03/css-alignment/

btw you should get in the habit of always providing an alt attribute on your images. See https://support.siteimprove.com/hc/en-gb/articles/115000013031-Accessibility-Image-Alt-text-best-practices

Answer 2

Since you know the exact dimensions you want, the easiest way is this:

div {

width: 200px;

padding-top: 75px;

padding-bottom: 75px;

text-align: center;

}

div img {

width: 50px;

height: 50px;

}

If, however, you want the div to be responsive, or if you don't know how big the div will be at any given time, you can use the following:

div {

position: relative;

}

div img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

The key to the second one is understanding that the 50% for top and left mean something different than the 50% in the translate. The top and left are relative to the div container; the translate is relative to itself. So, without the transform, the upper-left corner of the image will be exactly in the center of the div. The transform moves the image half of itself up and to the left, centering the image right in the center of the div.

Ian