垂直水平居中是日常前端開發當中一個常見的需求，在支援 CSS3 屬性的現代瀏覽器當中，有一個利用 CSS3 屬性的垂直水平居中方法：

   .center {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50
 
%,-50%); 
    }

上面的例子，無論我們怎樣調整視窗的大小，紅色方塊始終會在視窗垂直、水平居中。

原理
為了解釋原理，我們建立兩個元素:

  <div id="outer">
        <div id="inner">
        </div>
  </div>

先不加上 transform 屬性：

  #outer {
        position: relative;
        width: 500px;
        height: 500px;
        border: 2px solid yellow
 
;
    }

    #inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: red;
    }

可以看到紅色方塊左、上方距離外層方塊的距離都是250個畫素，如果我們想實現垂直水平居中，就應該將紅色方塊的中心點移動到目前元素左上角的位置，也就是分別向上和向左移動一半方塊邊長的長度，50個畫素。

     #inner {
        position: absolute
 
;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: red;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

水平垂直居中實現程式碼

.parent {
    width: 200px;
    height: 200px;
    background-color: black;
}
.child {
    position: relative;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    background-color:red;  
    -webkit-transform: translate(-50%, -50%) ;
    -moz-transform: translate(-50%, -50%) ;
    -ms-transform: translate(-50%, -50%) ;
    -o-transform: translate(-50%, -50%) ;
    transform: translate(-50%, -50%) ;
 } 

以往，彈出層水平垂直居中我們往往用js實現，現在可以用css3來完成了。而且用這種方法彈出層不需要設定高度，很方便。