发布居中图像

Question

我们有一个2000像素宽，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

以下是垂直和水平居中的好方法。

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

Answer 2

在你看过的情况下，他们很可能使用的背景图片可以使用background-position居中：

＆＃13;

＆＃13;

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

＆＃13;

<header></header>

＆＃13;

＆＃13;

＆＃13;
http://fiddle.jshell.net/8L2L1ey1/