html - 问题居中图像

Question

我们有一个 2000 像素宽 x 580 像素高的图像，目前它适合屏幕，即当我们调整浏览器大小时，中间的箭头居中，图像似乎失去了居中，我已经看到这样做，你有一个大图片居中，当浏览器调整大小时，图片保持居中。

谁能告诉我这是怎么做到的？

<div style="height:580px; margin-left:-10%; position:relative; max-width: 2000px; background-image:url("/content/largeImage.png")">
     <div class="container">
        <p>
          Do something else
        </p>
     </div>
</div>

Answer 1

在您看到的案例中，他们很可能使用了背景图像，可以使用 background-position 将其居中:

header{
background:url('http://lorempixel.com/1500/500/') no-repeat;
background-position:center;
width:100%;
height:300px;
}

<header></header>

http://fiddle.jshell.net/8L2L1ey1/