curious1 curious1 - 1 year ago 59
CSS Question

How to make a non-background image display in the center of a smaller div

I have the following HTML:

<div style="width:400px;height:300px;overflow:hidden;">
<img src="" />

Here is the jsfiddle:

The image is 600px in width. It cannot be a background image. So the image's center in the width direction is not displayed in the center (width direction) of the parent div. Note that the image cannot be responsive.


Answer Source

meet the command which basically center everything :)

top: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download