本文主要讲解“用css垂直居中任意图片的方法有哪些”。本文的解释简单明了，易学易懂。现在，请跟随边肖的思路，学习“用css垂直居中任意图片的方法有哪些”！
方法一：
将外部容器的显示模式设置为display:table。不用说，hellip一个span标签嵌套在img标签的外部，span的显示方式设置为display:table-cell，这样span内部的内容就相当于表格，可以方便地使用垂直对齐属性来对齐内容。
代码如下：
html xmlns=' http://www . w3 . org/1999/XHTML ' heartetahttp-equiv=' Content-Type ' Content=' text/html；Charset=gb2312'/title方法1-用未知的height-www.cleanthem.com/titlestyletype垂直居中图片=' text/CSS '正文{ height :100%；} # box { width:500px高度：400 px；display:table文本对齐：居中；border :1 px solid # d3d 3d 3；背景# fff} # box span { display : table-cell；垂直对齐：毫米；} # boximg { border :1 pxsolid # CCC；}/style！-[ifltie7]style type=' text/CSS '？# box { position:relative飞越：隐藏；} # box span { position : absolute；左侧：50%；top :50%；} # boximg { position : relative；左侧：-50%；top :-50%；}/style！[endif]-/headsdydivid=' box ' spangsrc=' images/demo _ ZL . png ' alt=' nb
sp;/></span> </div> </body> </html>
演示地址
方法二：
标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法2 - 未知高度的图片垂直居中 - www.cleanthem.com</title> <style type="text/css"> body { height:100%; } #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]--> </head> <body> <div id="box"> <i></i><img src="images/demo_zl.png" alt="" /> </div> </body> </html>
演示地址
方法三：
在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法3 - 未知高度的图片垂直居中 - www.cleanthem.com</title> <style type="text/css"> body { height:100%; } #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:"."; /* 具体的值与垂直居中无关，尽可能的节省字符 */ 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; } </style> </head> <body> <div id="box"> <p><img src="images/demo_zl.png" alt="" /></p> </div> </body> </html>
感谢各位的阅读，以上就是“css实现任意图片垂直居中的方法有哪些”的内容了，经过本文的学习后，相信大家对css实现任意图片垂直居中的方法有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/101252.html