How to make an image center (horizontally) inside a bigger div? Using only css.

[sandy]

I have a div 550 x 250 px. I want to insert an image (size width = 100px & height any size) in the middle of the div….

[sandy]

@jurotek
Thanks for reply. sorry mistake in my statement. your code only for fixed size of images. but i want to insert images of differ height…… please tell me solution for this issue.

[Andy Howells]

Why use absolute/relative positioning? Just use;

img { display: block; margin: 0 auto; }

Example pen: http://codepen.io/andyunleashed/pen/imdlA

[sandy]

thanks @jurotek
problem solved by using “display:table-cell” and “vertical-align:middle”. thanks for suggestion…..

[EkingRDL]

You can use CSS calc unit

.logo {
margin-top: calc(50% – logoheight);
}

[Andy Howells]

@ekingrdl – Whoa now, that’s overkill for what’s needed and browser support is pretty dodgy – http://caniuse.com/#search=calc

[Author]

Posts