div+css中一个背景图片，如何让图片在背景图片上垂直居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div+css中一个背景图片，如何让图片在背景图片上垂直居中相关的知识，希望对你有一定的参考价值。
图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）.boxoutwidth:120px; height:119px; display:table; background:url(photoset_bg.gif) no-repeat;.boxindisplay:table-cell; vertical-align:middle; text-align:center; width:114px; height:114px;/*for IE*/.boxout*position:relative;.boxin*position:absolute; *top:50%; *left:0;.boxout p*position: relative; *top:-50%; *margin:0; *padding:0;.boxout img *margin-top:2px; border:1px solid #ccc;/*for IE 图片4像素空白bag*/
" width="100" height="33" />
图片没有固定的大小，就是无论它多大多小始中在这个背景上面是垂直水平居中的
回复 y1cheng ：那文章我也看过了，就是我改成自已的，换成背景图片就不行了 ,不是FF那种图片,是FF那种图片所在背景图片中水平垂直居中，它后面那不是有一个背景图吗？
帮忙解决一下，解决后送高分。
.box
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
width:100px;
height:100px;
.box img
/*设置图片垂直居中*/
vertical-align:middle;
cursor:pointer;
</style>
本文来自: PQ秀秀网(http://www.pqshow.com) 详细出处参考：http://www.pqshow.com/design/htmlcss/200912/12739.html 参考技术A 就不多打字了，蓝色的这篇文章很全面了。http://bbs.blueidea.com/thread-2666987-1-9.html 转自蓝色理想 没理解你的用意，你是说把FF那种图片换成背景图？ 如果是这样的话，不就是简单的background:url() no-repeat center center;吗。但前提是你背景图片不得小于容器吗，你
这张图片明显比你的.boxout大的多，何来的居中，连完整显示都不能 补充还是没理解你的意思。最好百度hi聊 参考技术B <style
type="text/css">
.box
/*非IE的主流浏览器识别的垂直居中的方法*/
display:
table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/*
针对IE的Hack
*/
*display:
block;
*font-size:
175px;/*约为高度的0.873，200*0.873
约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border:
1px
solid
#eee;
width:100px;
height:100px;
.box
img
/*设置图片垂直居中*/
vertical-align:middle;
cursor:pointer;
</style>
本文来自:
PQ秀秀网(http://www.pqshow.com)
详细出处参考：http://www.pqshow.com/design/htmlcss/200912/12739.html 参考技术C 应该是要把 text-align 设成 居中..
如果不行的话, 就只能设置padding 值了 参考技术D 这样
.boxout
width:120px;
height:119px;
display:table;
background:url(photoset_bg.gif) no-repeat center center;
div css里怎么让一个图片在任意位置，比如靠居中在偏下，
让一个图片在div任意位置，可以使用绝对定位的方式。如下示例代码：
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试页面</title>
</head>
<body>
<style type="text/css">
.test-boxwidth:300px;height:260px;margin:0px auto;position:relative;border:1px solid #333;
.test-box imgposition:absolute;bottom:10px;left:50%;margin-left:-60px;border:0;
</style>
<div class="test-box">
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif?v=31680756.gif">
</div>
</body>
</html>
示例中做了一个宽为300px，高为260px像素的容器，其中图片通过绝对定位，控制其位于容器的水平居中，容器底部的位置。bottom:10px;控制图片距离底部10px，left:50%、margin-left:-60px;控制图片水平居中。其中的margin-left的值根据图片宽度变化，为负的二分之一图片宽度。
最终效果如下图：
<div style="width:500px;height:400px;border:1px solid red;position:relative;">
<img src="852869179433967774.jpg" style="width:100px;height:100px;position:absolute;left:200px;top:200px;"/>
</div> 参考技术B 1、设置margin值，这样可以在不同浏览器中位置自适应改变。
2、用定位，外层用相对的，内层用绝对的。 参考技术C position：absolute 通过 left top right bottom 等来控制位置 参考技术D 用css样式进行定位布局，不懂的可以再问
以上是关于div+css中一个背景图片，如何让图片在背景图片上垂直居中的主要内容，如果未能解决你的问题，请参考以下文章