Solve picture centering problem perfectly

img is an inline element, to set its margin property to be centered, convert it to block element Display:block, and then use margin:0 Auto to center the image horizontally; (Some designers add a div tag to the picture, Then center the idea with the margin of the DIV tag: Use the Text-align property to center the picture horizontally, and then set the value of the Padding-top to center vertically. The structure is as follows:<styletype= "Text/css">Div{width:180px;Height:180px;Border:1px solid #000;position:relative;Display:Table-cell;text-align:Center;vertical-align:Middle; }Div P{position:Static;+position:Absolute;Top:50%; }div img{position:Static;+position:relative;Top:-50%; Left:-50%; } </style> <Div><P><imgsrc= "0225/12986229678396.jpg"width= "+"Height= "+"></P></Div><BR> <Div><P><imgsrc= "0225/12986229678396.jpg"width= " the"Height= " the"></P></Div>Method Two<Div> <imgsrc= "Images/tt.gif"width= "Max"Height= "+" /> </Div>CSS styles are as follows: div {width:300px; height:150px; Background-color: #ccc; border: #000 1px solid; text-align:center; padding-top:50px;}

Solve picture centering problem perfectly