Picture with unknown height centered vertically

The width and height of the picture are unknown, without a fixed size, in this premise to make the picture in a fixed width and height of the container vertically centered, think of it is still very troublesome, because the recent project may use this solution, so some common methods are collected and collated.

The image below is an ideal image, with the width and height of the outer container fixed, the middle picture width and height unknown, but the picture should always be centered vertically relative to the outer container.

But the actual implementation of the effect is not very perfect, because the browser resolution are different, so the browser will have 1px-3px deviation.

Method One (XHTML 1.0 transitional):

The method is to set the display mode of the external container to display:table,img the outside of the label and then nest a span label, and set the display mode for span to Display:table-cell. This makes it easy to use vertical-align like table elements, of course this is only in the standard browser, IE6/IE7 still have to use positioning.

HTML Structure section:

The following are the referenced contents: <div id= "box" > <span></span> </div>

CSS Style section:

The following are the referenced contents: <style type= "Text/css" > #box { width:500px;height:400px; display:table; Text-align:center; border:1px solid #d3d3d3; background: #fff; } #box span{ Display:table-cell; Vertical-align:middle; } #box img{ border:1px solid #ccc; } </style> <!--[If LTE IE 7]> <style type= "Text/css" > #box { position:relative; Overflow:hidden; } #box span{ Position:absolute; left:50%;top:50%; } #box img{ position:relative; left:-50%;top:-50%; } </style> <! [endif]-->

Method Two (XHTML 1.0 transitional):

Method Two and method one realization principle is similar, the structure is same, method one uses is the conditional annotation, method two uses CSS Hack.

CSS Style section:

The following are the referenced contents: <style type= "Text/css" > #box { width:500px;height:400px; Overflow:hidden; position:relative; Display:table-cell; Text-align:center; Vertical-align:middle; border:1px solid #d3d3d3; background: #fff; } #box span{ position:static; *position:absolute; * * for IE6/7 hack*/ top:50%; * * for IE6/7 hack*/ } #box img { position:static; *position:relative; * * for IE6/7 hack*/ top:-50%;left:-50%; * * for IE6/7 hack*/ border:1px solid #ccc; } </style>

This method has a disadvantage, in the standard browser because the external container #box display mode is Display:table-cell, so that #box cannot use the margin property, and in the IE8 set the border also invalid.

Method Three (XHTML 1.0 strict):

Standard browser or setting the display mode of an external container #box to Display:table-cell,ie6/ie7 is a way to insert a pair of empty tags before the img tag.

HTML Structure section:

The following are the referenced contents: <div id= "box" ><i></i></div>

CSS Style section:

The following are the referenced contents: <style type= "Text/css" > #box { width:500px;height:400px; Display:table-cell; Text-align:center; Vertical-align:middle; border:1px solid #d3d3d3; background: #fff; } #box img{ border:1px solid #ccc; } </style> <!--[If ie]> <style type= "Text/css" > #box I { Display:inline-block; height:100%; Vertical-align:middle } #box img { Vertical-align:middle } </style> <! [endif]-->

Method Three also applies XHTML 1.0 transitional. The above methods are collected in the blue ideal, temporarily only to these 3 methods are more satisfied, compatibility is good, use up the restrictions are also relatively small, and some methods I have tested, the effect is not ideal, in the browser in the difference is relatively large. In addition Shizhong the United States here also collected some methods.

Think: Many methods rely on setting the display mode of the external container to table to achieve vertical centering, that is, div to simulate table, if CSS has a property to achieve this effect that would be good. If you have a good way, you are welcome to share.