Beverleyh

I hit a snag recently when I wanted to absolutely center a responsive image and couldn't use my 'go-to' method of CSS3 transforms, due to other conflicting CSS3 keyframe animations that were cancelling it out;

Code:

img { 
	max-width: 100%; 
	max-height: 100%; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%)
}

Here's ...

Updated 05-28-2016 at 07:23 AM by Beverleyh

Tags: align, alignment, center, centre, horizontal, middle, vertical

Categories

CSS related , Web Design issues