9 September 2015

Centre align image within fluid element using CSS

Centering an image within a fluid element can be done by applying relative positioning to the containing element, absolute positioning to the contained image and then applying the CSS3 transform translate method to reposition the image on the X and/or Y axis -50% its own width/height. This approach is IE9+ compatible.

Example HTML:

Example CSS:

View demo with fluid width and fixed height.

View demo with fluid width and fluid height.

For an alternative approach: jQuery approach to centring images within fluid element.