<!--需要有一層包圍-->
<div class="hervercenter outer">

  <!--你要置中的方塊-->
  <div class="hervercenter inner"></div>

</div>
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// 這是你要置中的區塊
.inner 
{
  background: #75FFA3;
  width: 100px;
  height: 100px;
}

// 須要在置中的區塊外面包一層才能達到效果
.outer
{
  background: #FF7575;
  height: 200px;
}


// 這段就是你的 model 直接套用貼上吧
.hervercenter
{
    //外圍
    &.outer 
    {
        text-align: center;
        margin: 0 auto;
 
        &:before, &:after
        {
            content: '';
            display: inline-block;
            vertical-align: middle ;
            height: 100%;
        }
    }
     
    //內圍
    .inner 
    {
        display: inline-block;
        vertical-align: middle;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.