使用骨架样板；垂直对齐容器

Question

我想垂直居中我的容器。任何人都知道如何使用 Skeleton 样板来做到这一点？我已经尝试了一些东西，但它继续保持在顶部而不是垂直对齐。希望有人可以帮助我:)

HTML：

<div class="container"> <div class="sixteen columns"> <h1 class="remove-bottom"></h1> </div> <div class="one-third column"> <div class="middle-wrapper"> </div>
</div> <div class="one-third column"> <div class="middle-wrapper"> </div>
</div>
<div class="one-third column"> <div class="middle-wrapper"> </div>
</div> </div>

CSS：

/* Base 960 网格 */

.container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row                                        { margin-bottom: 20px; }

Answer 1

一些浏览器喜欢'margin: 0px auto'。

将你的 margin: 0 auto 更改为 'margin: 0px auto;'

Answer 2

try this. not for skeleton framework though. An example -better dont override container and column classes Have new classes for them and override

 <div class="container top">
   <div class="between"
      <div class="sixteen columns middle">
         <h1 class="remove-bottom"></h1>
      </div>
         <div class="one-third column">
           <div class="middle-wrapper">
           </div>

         </div>
         <div class="one-third column">
           <div class="middle-wrapper">
           </div>

         </div>

         <div class="one-third column">
           <div class="middle-wrapper">
           </div>
          </div>
         </div>
     </div>

CSS

 .top{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
   }

   .between{
   display: table-cell;
vertical-align: middle;
  }

 .middle{
  margin: 10px auto;
  width: 960px;
}