Center image Y and X within DIV

Question

How would I center the image so that it is in the complete center of the DIV?

#box
{
border: 1px solid;
margin: 0px 10px 0px 0px;
width: 250px;
height: 200px;
border-radius: 35px; 
-webkit-border-radius: 35px; 
-moz-border-radius: 35px; 
border: 1px solid #E8E8E8;
display:inline-block;
}

<div id="box">
<img src="cleaning1.jpg" height="150px" width="200px">
</div>

In order to align an image with unknown dimensions vertically and horizontally center, you can refer [my answer here](http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474). — Hashem Qolami, Mar 02 '14 at 09:09

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

You can change the default display type of the image to inline-block and create a full-height pseudo-element beside that which is inline-block too.

Then align the inline elements vertically by vertical-align: middle; and get the image to the center by using text-align: center; for the parent #box.

Also, there will be a white space character between inline(-block) elements you have to remove it. you can refer my answer to do that.

Here you go:

#box {
    /* Other styles here... */

    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

#box:after {         /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#box img {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */  
}

WORKING DEMO

For further details you can refer to my answer here.

edited May 23 '17 at 11:57

Community

1
1

answered Mar 02 '14 at 09:16

Hashem Qolami

97,268
26
150
164

Thank you. I did not do it this way that is why it did not work. – Mar 02 '14 at 09:18
Hashem, would there be a reason as to why my txt is not appearing in the box div? My plan was to center the image and then write above it. But no text shows up if I put it in. – Mar 02 '14 at 09:40
If that is what you want, then use my solution as the text will float on top. That is a much better way to solve your problem than adding unneccassary elements and css code, which really doesn't need to be there. – Asons Mar 02 '14 at 09:44
@user3354493 `My plan was to center the image and then write above it` well you should note that in your question. In this case, it's better to use the image as **background-image** as *PellePenna* suggested. And if you want to align the **text** center both vertically/horizontally, you can follow *[my approach](http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474)* described at the first section. **[Here is a demo](http://jsfiddle.net/hashem/VsakD/11/)** – Hashem Qolami Mar 02 '14 at 09:59
I was using a pattern as the background for the DIV but i guess I can go without it. – Mar 02 '14 at 10:05
@user3354493 You can use multiple background images. here is the **[Updated Demo](http://jsfiddle.net/hashem/DQGZt/)** – Hashem Qolami Mar 02 '14 at 11:02

score 0 · Answer 2 · answered Mar 20 '18 at 06:39

use flexbox!

<div id="box" style = 'display:flex'>
    <div style = 'margin:auto'>
       <img src="cleaning1.jpg" height="150px" width="200px">
    </div>
</div>

Note: I wrapped the image inside of a div rather than simply giving the image the style attribute margin:auto because I have noticed in some cases that the image width/height parameters are not respected otherwise.

Center image Y and X within DIV

2 Answers2