Html 如何将图像居中，使其仅显示其中间？

我正在使用引导。我有4列，每列包含一个大图像。如何仅显示图像的中心并相应地重新调整其大小

以下是我目前拥有的：

CSS:

HTML:

如果我没有很好地描述它，我发现了这个我想要的例子： 如果查看每个服务器的背景图像，它会很大，但它们只显示中心

我尝试过使用img responsive和center block类，但都不起作用

---

多谢各位

他们像其他人一样使用它

img{background-position:50%}

他们的确切密码是：

.index > a#creativeLink span.image {
    background-image: url('../i/creative.jpg');
}

在您的情况下，它将转化为以下内容：

#steam{background:url(assets/img/steam.jpg) no-repeat 50%; background-size:cover}

您的代码

.img校准{
利润率：50%0；
宽度：100%；
}

如果将背景图像的

背景位置设置为居中，则可能更容易执行此操作，因为html是空的。添加一些东西（无论什么），然后使用颜色：透明，这样列就可以得到它们的大小。另外，请记住在BS中添加一个容器div来封装行，无论它是容器还是流体容器，
标记为。不推荐！
.index > a#creativeLink span.image {
    background-image: url('../i/creative.jpg');
}

#steam{background:url(assets/img/steam.jpg) no-repeat 50%; background-size:cover}

<center> your code <center/>

<!--Do try this
(set this class to you image)-->

.img-align {
    margin: 50% 0;
    width: 100%;
}