Question

我有以下HTML代码，其中每个场景div都是一个设置宽度并向左浮动我希望整个.section_2块在视口中居中，无论屏幕尺寸如何：

<div id="wrapper">
  <div id="scroller">
    <section class="section_2">
      <div class="scene2B1" data-stellar-ratio="1.1"></div>
      <div class="scene2B2" data-stellar-ratio="1.4"></div>
      <div class="scene2B3" data-stellar-ratio="1.3"></div>
      <div class="scene2B4" data-stellar-ratio="1.5"></div>
      <div class="scene2B5" data-stellar-ratio="1.2"></div>
    </section>

Answer 1

CSS。

.section_2 { margin: 0 auto; width: 800px; }

注意：您必须设置宽度。

Answer 2

如果要设置div＃wrapper将其自身定位在视口的中心，请务必执行以下操作之一：

知道div＃wrapper的确切宽度和高度是什么
使用javascript根据用户视口动态修改div＃wrapper的高度和宽度

我会给你选项＃1的示例代码（选项＃2除了添加javascript以动态调整div＃wrapper之外是相同的）

HTML：

<body>
  <div id="wrapper">
    <div id="scroller">
      <section class="section_2">
        <div class="scene2B1" data-stellar-ratio="1.1"></div>
        <div class="scene2B2" data-stellar-ratio="1.4"></div>
        <div class="scene2B3" data-stellar-ratio="1.3"></div>
        <div class="scene2B4" data-stellar-ratio="1.5"></div>
        <div class="scene2B5" data-stellar-ratio="1.2"></div>
      </section>
    </div>
  </div>
</body>

CSS：

div#wrapper {
  width: 300px; /* Must define this */
  height: 300px; /* Must define this */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px /* This is HALF of the height times -1 */
  margin-left: -150px /* This is HALF of the width times -1 */
}

Answer 3

大部分时间@SMacFadyen给出的方式都有效，但如果没有（并且我有时没想到它为什么没有），你可以尝试：

    .section_2 {
         margin-left:400px;/* half the width*/
         left:-50%;
         width: 800px;
    }

与其他答案一样，您必须设置宽度。它似乎有点像黑客，但它对我有用。

演示：http://jsfiddle.net/jdwire/EfSBA/1/z

要将其置于整个视口而不是父元素中，您可以尝试：

     position:fixed;

但这会产生一些微妙的副作用，所以要确保它是你想要的

如何在视口中居中元素？

3 个答案: