Margin auto not working

In one of the starting tutorial of ResponsiveWebDesign Course, it was mentioned we can use margin: auto to center anything

But below code is working fine, but is NOT CENTERED

.i_am_image {

            width: 30px;

            margin: auto;



        .i_am_image:hover {

            animation-name: width;

            animation-duration: 500ms;



        @keyframes width {

            100% {

                width: 40px;






    <!-- To change animation on hovering -->

    <img class="i_am_image" src="" alt="Google's Logo" />

Try to use display: block; property.

You must have a <style> opening tag too…

it is working now. but how?

To make the image behave like heading elements (which are block-level), you must create an img type selector that uses the value block for the display property, and use the applicable margin values to center it horizontally.