css怎样让背景图片居中,CSS让背景图片居中显示的方法

当我们的背景图片写成：

background: url("images/titleborder.png") no-repeat;

时，表示背景图片不重复，位置会默认为在div中居于左上角。

例：

#header {

width: 100%;

height: 400px;

border: 1px solid;

background: url("images/titleborder.png") no-repeat;

}

效果：

1.png

如果背景图片写成：

background: url("images/titleborder.png") center center no-repeat;

效果是水平垂直居中对齐：

2.png

第一个center表示水平居中，第二个center表示垂直居中。

要令背景图片水平居中，并贴近div顶部，代码可以这么写：

background: url("images/titleborder.png") center 0 no-repeat;

或者：

background: url("images/titleborder.png") center top no-repeat;

效果：

令背景图片居于右上角的写法：

background: url("images/titleborder.png") right top no-repeat;

效果：

左居中：

background: url("images/titleborder.png") left center no-repeat;

P9_3E4$9[Q4F0EL}9%]R32A.png