How to center an image?

来源：互联网发布：js鼠标点击空白处事件编辑：程序博客网时间：2024/06/05 20:32

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 src="mini/clock.gif" mce_src="mini/clock.gif" alt="" />    </div>    <br />    <div class="container3">        <img src="mini/clock.gif" mce_src="mini/clock.gif" alt="" />    </div>    <br />    <div class="container4">        <img src="mini/clock.gif" mce_src="mini/clock.gif" alt="" />    </div>

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