問題集中圖像

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

在你所看到的情況下，它們最有可能使用的背景圖像，這可以使用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/

Answer 2

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

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