How to center an 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">  </div> <br /> <Div class = "container3">  </div> <br/> <Div class = "container4">  </div>

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