CSS中背景图怎么居中显示啊

css中有一个background-position 属性设置背景图像的起始位置。

他有以下可能的值：

1，top left  左上角

2，top center  正上方

3，top right  右上方

4，center left  正左方

5，center center  正中

6，center right   正右方

7，bottom left  左下方

8，bottom center  正下方

9，bottom right   右下方

所以要是背景图居中显示，css里边加上下边这条属性：

background-position:center center;

1、打开在线写前端代码的网站如jsrun或者jsfiddle。

目2、标是做一个如图所示的效果，不同大小的。

3、每个方框的html 如下，

<div>

<span>

<img src='地址'>

</img>

</span>

</div>

4、css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。

其中

display: table-cell;

text-align: center;

vertical-align: middle;

这3行决定居中效果。

其中

img {

max-width: 100%;

max-height: 100%;

}

的目的是让可以缩放而比例不变。

div {

float:left;

margin:5px;

padding:5px;

border:1px solid #000;

}

span {

font-size: 0;

width: 150px;

height: 150px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

img {

max-width: 100%;

max-height: 100%;

}

5、效果如下，很好的实现居中。

6、上面是div为float的情况

div如果是absolute或fixed也可以正常表现。

只有一个div的情况下，代码如下

<div>

<span>

<img src='地址'>

</img>

</span>

</div>

div {

margin:5px;

padding:5px;

border:1px solid #000;

position: absolute;

left:100px;

top:100px;

}

span {

font-size: 0;

width: 150px;

height: 150px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

img {

max-width: 100%;

max-height: 100%;

}

7、这张仍然是居中的，没有收到父容器的影响。

1，可以用d性容器来实现居中。
2，用<p align="centger"><img src="###"></p>来实现居中。
3，容器和都设置宽度高度，已经知道宽度高度情况下，用margin-top,margin-left等方式来设置居中。
3，用相对定位方式实现居中。margin:0 auto;
4,对容器设置text-align:center;方式来实现居中。

在插入中添加一个
<div style="text-align:center">
<img src=""/>
</div>就行了 这个保证你的是在div中居中的

0 0 是设置取的位置起点。
比如如果div的高宽为100,100像素，高宽为150,150像素，那么0 0 就显示左上部分的，如果是50 50 ，那么显示的就是右下部分的，如果是250 250 ，那么就不会显示在div上了。
如果要显示为居中的话，可以设置padding-left和padding-right值。。。。。。

方法如下：
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

p {

height:30px;

line-height:30px;

width:100px;

overflow:hidden;

}
这段代码可以达到效果。
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
p {

padding:30px;

}

---