使用css在div中居中图像

Question

我正在使用JSSOR图片库，目前正在展示肖像图片。

我已经制作了一个不再拉伸的css类：

然而，我无法将这个想象集中在div中。

<div>
    <div class="portrait" u=image style="background-image: url(../img/zachry/1.jpg">&nbsp;</div>
    <div u="thumb"></div>
</div>

这是CSS？

.portrait {
position: relative;
width: 850px; 
height: 565px;
background-repeat: no-repeat;
text-align: center;
}

如何让图像居中？

Answer 1

您正在使用图片作为div的背景。

几乎所有元素都有一个名为background-position的属性，它可以将center作为值，将给定的图像置于元素的中间位置。

所以它可能是这样的：

.portrait {
    ...
    background-position: center;
}

Answer 2

在CSS中使用以下代码应该有效：

background-position: center;

Answer 3

我想到两种可能的方式......

1. div {background-position: center;}

2. div {margin-left:auto; margin-right:auto;}