The image of uncertain size is vertically centered_html/css_WEB-ITnose

If the image size is uncertain, how to center the image vertically and horizontally in the DIV? Of course, if you use a form, it's a different story. Here we only discuss the use of css for control.

If you only want to center it horizontally, use the text-align:center; (margin:0 auto; in Firefox) attribute. However, vertical centering seems difficult to achieve. Whether using "vertical-align:middle;" in CSS or using img's align="absmiddle", the image seems to be indifferent in the vertical direction.

I found the following method and made a collection.

Style part:

.middle-out{

width: 600px;

height: 385px;

position: relative;

display: table-cell;

vertical-align: middle;

text-align:center;

border: 1px solid #f00;

}

.middle-in{

position: static;

*position:absolute;

top:50%;

}

.middle-out .middle-in img{

position:static;

*position: relative;

top:-50%;

left:-50%;

}

HTML part:

< div class="middle-out">