I am trying to center an image using a CSS Trick, even when the image size is random and not fixed. I don't want to make the image responsive, but rather bring it to the center without changing its actual pixel dimensions.
Here is my code:
HTML:
<div class="slider"><img class="center" src="images/mySlide.jpg" /></div>
CSS:
.slider{
width: 100%;
position: relative;
}
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}