Centering img inside div

Question

Im trying to center a (pumpkinvector.jpg) image inside a .div using this classic trick:

.pumpkin{
position: relative;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

It seems to work fine on the very bottom div where background is red. However, that was just a test, it is not were I need the image to center.

I need to center pumpkinvector.jpg image up top in "grid2" div that inside "grid 6 october" div. October div has additional code and inner class to give background image and make it resize proportionally in height and width %. Using the same centering code above, the pumpkinvector.jpg now flows to the next line and starts to position outside of the .october div. Can someone why this is?

Please bear with me here. I thought the addition of images helps you visualize my problem so I uploaded to my own site instead of js.fiddle. Here is the link: http://jingsportfolio.com/october.html

Please view source to view code. Thanks.

This question is different because it asks how to center div in the context that its parent div has complex markup that makes any traditional centering off and throws in on a new line below parent div.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Nov 18 '15 at 15:03
.pumpkin should probably have `position:absolute`. It's parent, should have `position:relative`. But as @Paulie_D said, you should post minimal code. HTML and CSS. — service-paradis, Nov 18 '15 at 15:05
This question is different because it asks how to center div in the context that its parent div has complex markup that makes any traditional centering off and throws in on a new line below parent div. — Jing Liang, Nov 19 '15 at 09:51

score 0 · Answer 1 · answered Nov 18 '15 at 15:15

Check this little example probably will be useful, how to center a image inside a div

The html code:

<div class="parent">
    <img src="http://45reu03dndd711szsx3satxn.wpengine.netdna-cdn.com/wp-content//uploads/2015/08/Top-10-best-CSS-development-tools-2015.png"/>
</div>

The css code:

.parent {
    text-align: center;
    width: 100%;
    border: 1px solid #ccc;
}

img .picture {
    width: 40px;
    height: 40px;
}

This code is running here

score 0 · Answer 2 · answered Nov 18 '15 at 15:20

Horizontal alignment is really easy with CSS:

the item you want to align has to have "margin: auto"
And the item wrapping has to have a fixed width.

Vertical alignment is a little more tricky:

This trick only works if your wrapper has a fixed height and your content to align is a textual tag like span or p or h1
use the line-height css attribute of the wrapper andset its value to its own height and it's done.

OR
if your content to align has a height of 300px use margin-top: calc(50% - 150px)
change 'margin-top' for absolute "position" and "top" attribute if needed

see I need it not be fixed width.I need it be responsive, image has max-width:100. And with the margin:auto trick, the same problem is happening. It doesnt center ontop of the parent div with a background image, but goes onto the next line as if a block element even if I put display:inline. thanks — Jing Liang, Nov 18 '15 at 18:26

Centering img inside div

2 Answers2