难以定位居中div（再次）

Question

http://samnorris.co.nz/backup/test/

在毕达哥拉斯引用的部分中，“弦乐的嗡嗡声中有几何形状， 在球体的间距中有音乐“是Codepen的一个小实验我已经调整了一下并且一直在玩（旋转的动画圆圈）

...不确定我的思绪今晚是否只是运行有点慢或者我有很大的困难定位和居中包含这些元素的div包含引号并且不覆盖背景......

任何帮助将不胜感激：）

编辑：更新的代码，我弄清楚为什么它被推下来（封装器上的填充导致了它，所以我把背景div改为固定高度）现在我只需要弄清楚为什么我有使用左：32％（大致）试图使其居中。保证金：0自动失败了我，将#spheres-block设置为宽度100％会搞砸bg。

相关CSS ：

.spacesuit-bg {
    background: transparent url("../img/spacesuit-bg.jpg") no-repeat 0 0;   
    color: #fff;
    padding: 15% 0;
    text-align: center;
    text-transform: uppercase;
    -webkit-transform: translate3d(0,0,0);  
}


.quote-wrapper {
    width: 100%;
    display: block;
    padding-top: 300px;

}

.quote-one {
    font: 18px/1em "proxima_nova_rgbold", sans-serif;
    font-weight: 700;
    text-shadow: 0px 3px 3px rgba(0,0,0,0.3);   
    letter-spacing: 1px;
    word-spacing: .06em;            
    width: 100%;
    line-height: 1.25em;
}

.quote-two {
    font: 36px/1em "proxima_nova_rgbold", sans-serif;
    font-weight: 700;
    text-shadow: 0px 3px 3px rgba(0,0,0,0.3);   
    letter-spacing: 1px;
    word-spacing: .06em;            
    width: 90%;
    line-height: 1.25em;
    padding-top: 25px;
    margin: 0 auto;
}


.spacesuit-wrapper:before, .missiongo, .golaunch { 
    display: inline-block; 
    vertical-align: middle; 
}


#spheres-block {
  overflow: hidden;     
  position: absolute;
  display: block;
  width: 600px;
  height: 600px;
  left: 32%;
}

.spheres {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  position:absolute;
}

.rings {
  border-radius: 50%;
  border: 2px solid rgba(255,255,255, .5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.6  
}

相关HTML ：

<div id="spacesuit-bg" class="section spacesuit-bg">
 <div id="spheres-block">
  <div class="spheres">
  <div class="rings"></div>
  <div class="rings"></div>
  <div class="rings"></div>
  <div class="rings"></div>  
  <div class="rings"></div>  
  <div class="rings"></div>     
</div>
</div>
 <div class="quote-wrapper">
   <div class="quote-one wow flipInX">"There is geometry in the humming of the strings,</div>
   <div class="quote-two wow flipInX">there is music in the spacing of the spheres."</div>

</div>
</div>

Answer 1

我不是CSS专家（试图学习，这就是为什么我在这里花费时间:)），所以我可能错过了我的建议的其他问题，但无论如何我通过定位{{我能够达到预期的效果1}}相对而言，绝对定位speres-block的顶部偏移量为0：

quote-wrapper

我希望我理解正确。