这篇文章主要讲解了“CSS实现任意图片垂直居中的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css实现任意图片垂直居中的方法有哪些”吧！方法一：
这篇文章主要讲解了“CSS实现任意图片垂直居中的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css实现任意图片垂直居中的方法有哪些”吧！
方法一：
将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。
代码如下：
<html xmlns="Http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法1 - 未知高度的图片垂直居中 - www.cleanthem.com</title> <style type="text/css"> body { height:100%; } #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]--> </head> <body> <div id="box"> <span><img src="images/demo_zl.png" alt="" /></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; visibility:hidden; } #box p img{ *margin-top:expression((400 - this.height )/2); 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实现任意图片垂直居中的方法有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
--结束END--
本文标题: css实现任意图片垂直居中的方法有哪些
本文链接: https://www.lsjlt.com/news/86742.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0