How to vertically center an image of unknown height

This article mainly introduces the detailed method of setting vertical centering for pictures of unknown height. When practicing, pay special attention to the display situation in IE browser. Friends in need can refer to

Standard browser or Set the display mode of the external container #box to display:table-cell. IE6/IE7 uses the method of inserting a pair of empty tags in front of the img tag

But actually in the browser The effect achieved is not perfect. Since the parsing of each browser is different, there will be a deviation of 1px-3px in each browser.
Method 1:

This method is to set the display mode of the external container to display:table, nest a span tag outside the img tag, and set the span display mode to display:table-cell, so you can easily use vertical-align to align like table elements. Of course, this is only under standard browsers, IE6/IE7 also have to use positioning.
HTML code

<p id="box">
<span><img src="/static/imghwm/default1.png"  data-src="images/demo.jpg"  class="lazy"   alt="" /></span>
</p>

CSS code

<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:

The implementation of method two and method one The principles are similar, and the structure is the same. Method one uses conditional comments, and method two uses CSS Hack.
CSS code

#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; /*针对IE6/7的Hack*/
    top:50%; /*针对IE6/7的Hack*/
}   
#box img {   
    position:static;   
    *position:relative; /*针对IE6/7的Hack*/
    top:-50%;left:-50%; /*针对IE6/7的Hack*/
    border:1px solid #ccc;   
}

This method has a drawback. Under standard browsers, since the display mode of the external container #box is display:table-cell, #box cannot use the margin attribute, and in IE8 Setting the border below also has no effect.
Method 3:

The standard browser still sets the display mode of the external container #box to display:table-cell, IE6/IE7 uses the img tag The method is to insert a pair of empty tags in front.

HTML code

<p id="box">
    <i></i><img src="/static/imghwm/default1.png"  data-src="images/demo.jpg"  class="lazy"   alt="" />
</p>

CSS code

<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 4:

Wrap a p tag outside the img tag , standard browsers use the pseudo-class attribute: before of the p tag to implement it, and IE6/IE7 uses CSS expressions to achieve compatibility.
HTML code

<p id="box">
    <p><img src="/static/imghwm/default1.png"  data-src="images/demo.jpg"  class="lazy"   alt="" /></p>
</p>

CSS code

#box{   
    width:500px;height:400px;   
    text-align:center;   
    border:1px solid #d3d3d3;background:#fff;   
}   
#box p{   
    width:500px;height:400px;   
    line-height:400px; /* 行高等于高度 */
}   
/* 兼容标准浏览器 */
#box p:before{   
    content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具体的值与垂直居中无关，尽可能的节省字符 */
    margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
    visibility:hidden; /*设置成隐藏元素*/
}   
#box p img{   
    *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;   
    border:1px solid #ccc;   
}

Usage: beforer This method is more powerful for standard browsers, and no side effects have been found, but for IE6/IE7, If you have high performance requirements, the CSS expression method should be used with caution.
Method 5:

This method is for IE6/IE7. Set the font size of the external container of the image to 0.873 times the height to achieve centering. Standard browsers still Use the above method to achieve compatibility, and the structure is more elegant.
HTML code

<p id="box">
    <img src="/static/imghwm/default1.png"  data-src="images/demo.jpg"  class="lazy"   alt="" />
</p>

CSS code

#box{   
    width:500px;height:400px;   
    text-align:center;   
    border:1px solid #d3d3d3;background:#fff;   
    /* 兼容标准浏览器 */
    display: table-cell;   
 vertical-align:middle;   
    /* 兼容IE6/IE7 */
    *display:block;   
    *font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
    *font-family:Arial; /* 防止非utf-8引起的hack失效问题，如gbk编码 */
}   
#box img{   
    vertical-align:middle;   
}

The method of setting the font size feels weird, and I haven’t seen a reasonable explanation. I only know that the picture elements are somewhat different. The characteristics of other elements, but for IE6/IE7, this method is quite powerful.
Thinking: Many methods rely on setting the display mode of the external container to table to achieve vertical centering, that is, p to simulate table. It would be great if CSS had an attribute to achieve this effect.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use negative margin values ​​in CSS to adjust the center position

How to use the position:fixed attribute Center the DIV

The above is the detailed content of How to vertically center an image of unknown height. For more information, please follow other related articles on the PHP Chinese website!