image图片怎么居中显示

I find three ways to center an image in a div:

<style type="text/css">
        .container1
        {
            border: solid 1px #666;
            width: 100px;
            height: 100px;
        }
        .container1 img
        {
            margin: 42px 0px 0px 42px; /* (100-16)/2 = 42 */
        }
        .container3
        {
            border: solid 1px #666;
            width: 100px;
            height: 100px;
            position: relative;
        }
        .container3 img
        {
            position: absolute;
            top: 42px;
            left: 42px; /* (100-16)/2 = 42 */
        }
        .container4
        {
            border: solid 1px #666;
            width: 100px;
            height: 100px;
            position: relative;
        }
        .container4 img
        {
            position: absolute;
            top: 50%;
            margin-top: -8px; /* 16/2 = 8 */
            left: 50%;
            margin-left: -8px;
        }
    </style>
    <div class="container1">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="mini/clock.gif" mce_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="mini/clock.gif" alt="" />
    </div>
    <br />
    <div class="container3">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="mini/clock.gif" mce_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="mini/clock.gif" alt="" />
    </div>
    <br />
    <div class="container4">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="mini/clock.gif" mce_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="mini/clock.gif" alt="" />
    </div>

In my opinion, the third method is graceful and accurate, which i borrow from my last example.