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

2022-07-15 80酷酷网 80kuku.com

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

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><div class="img_v"> <p><img src="/images/logos.gif"></p></div></body></html></font><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]