CSS - 比页面更宽的居中内容答案

【问题标题】：CSS - Center content that's wider than the pageCSS - 比页面更宽的居中内容
【发布时间】：2015-03-07 03:58:27
【问题描述】：

今天有一个让我很沮丧的简单谜题：

考虑这个页面标记：

<head>
    <style type="text/css">
        #wrapper { overflow: hidden; }
        #content { width: 750px; height: 100px; background: orange; }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">Foo bar</div>
    </div>
</body>

我怎样才能让div#content 在页面中居中无论视口宽度如何？

我尝试了各种技巧（包括text-align: center; display: inline-block;）和绝对定位，但是当浏览器窗口的宽度低于 750 像素时，div#content 都是左对齐的。

过去我曾见过一些知名网站这样做。例如在 Apple.com 上他们为新的 Retina iPad 做广告时：图中的 iPad 是一个非常宽的图像，超出了主页区域（注意它不是 <body> 元素的 CSS 背景图像），但它没有t 当浏览器窗口仅适合主页内容时导致滚动。不幸的是，我似乎找不到任何这样做的现有网站，所以我找不到参考。

谢谢。

【问题讨论】：

标签： css

【解决方案1】：

是这个吗？看看->http://jsfiddle.net/joplomacedo/CkvuG/

HTML

<div id="page">
  <div id="main">
      <div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
  </div>
</div>

CSS

#page {
  overflow: hidden;
  min-width: 200px; /*same as #mains width*/
}

#main{
  position: relative;
  height: 500px;
  width: 200px;
  margin: 0 auto;
  background-color: lightgreen;
}


#extended-out { 
  height: 200px;
  margin: 0 -100px;
  background: indianred;
  border: 1px solid red;
}

#extended-out img {
    width: 100%; height: 100%;
}

【讨论】：

【解决方案2】：

http://jsfiddle.net/CNNcV/

<head>
        <style type="text/css">
            #wrapper { overflow: hidden; }
            #content { width: 750px; height: 100px; background: orange; 
            margin:0px auto;
            width:100%;}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">Foo bar</div>
        </div>
    </body>

这就是你要找的吗？

【讨论】：

否，因为当浏览器视口小于 750px 时，div#content 的左边缘与视口的左边缘对齐，而不是超出它。

【解决方案3】：

在此添加margin: auto，

#content { width: 750px; height: 100px; background: orange; margin: auto}

【讨论】：

那也行不通。仅当浏览器视口宽于 750 像素时，它才会居中 div#content；当视口小于 750px 时，元素的左边缘与视口的左边缘接触。我希望div#content 的水平中间始终与视口的水平中间对齐（假设没有滚动，因此我的 CSS 中的overflow: hidden;）。
为了更好地理解你，你的意思是当浏览器视口小于 750px 时高度应该相同？
高度无关紧要。我是水平对齐，而不是垂直。