纯css完美实现图片在div内垂直水平居中

以下是要实现插入图片的绝对居中,如果你仅仅是想让图片居中,最简单的方法是设为背景图片,如:

div {
    width:500px;border:1px solid #f00;
    height:500px;
    background:url("/images/logos.gif") center no-repeat
    }

言归正转,请看以下代码实现图片在div内垂直水平居中:

以下是HTML网页特效代码，点击运行按钮可查看效果：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <style type="text/css"> .img_v { display:table-cell !important; display:block; position:static !important; position:relative; overflow:hidden; width:400px; height:400px; border:1px solid #000; vertical-align:middle; text-align:center; } .img_v p { display:table-cell !important; display:block; margin:0; position:static !important; position:absolute; top:50%; left:50%; width:400px; margin-left:auto; margin-right:auto; } .img_v img { position:static !important; position:relative; top:auto !important; top:-50%; left:auto !important; left:-50%; } </style> </head> <body> <p><img src="/images/logos.gif"></p> <> </body> </html>
[提示：可先修改代码再按运行]

纯css完美实现图片在div内垂直水平居中

相关文章

栏目导航

最新文章

点击排行

推荐文章

打赏