CSS - 始终居中图像答案

【问题标题】：CSS - Center Image at all timesCSS - 始终居中图像
【发布时间】：2016-10-11 08:16:27
【问题描述】：

我在 Div 中使用了一张图片。

我想知道如何始终将图像垂直和水平居中。

目前，当我拉伸它时，它似乎是从左上角开始拉伸的，有没有办法让它始终居中。

我已经在网上搜索并尝试了各种方法，但似乎无法正常工作。

这是我的html：

<div class="container"></div>

这是我的 CSS：

.container {
    width: 100%;
    height: 75vh;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

感谢任何帮助或建议，在此先感谢您。

EDIT 你可以看到，当我拉伸浏览器时，它似乎是从左边伸展，我希望能够拥有图像居中，因此它从四面八方均匀延伸*

【问题讨论】：

标签： html css image center

【解决方案1】：

我得到了解决方案..！

这是您的 html 文件：

<div class="container"></div>

CSS 文件：

.container {
width: 100%;
height: 75vh;
position: absolute;
margin: auto;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
top: 0;
left: 0;}

这里正在工作demo

【讨论】：

实际上你根本不需要那么多 css：cover 将覆盖顶部/左侧等位置并重复：你可以达到与 jsfiddle.net/RachGal/7vmy2jww 完全相同的效果（顺便说一下@没有“居中”的DJONES）

【解决方案2】：

background-position: center 将使您的图像在垂直和水平中心对齐。

检查下面的sn-p：

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  height: 100vh;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

&lt;div class="container"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

.container {
    width: 100%;
    height: 75vh;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  background-size:auto;
}

&lt;div class="container"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

HTML：

<div class="container"></div>

CSS：

.container{width: 100%;height: 75vh;position: absolute;margin: auto;background-image: url("http://i.stack.imgur.com/2OrtT.jpg");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;top: 0;left: 0;}

【讨论】：