transform:translate(-50%,-50%)水平垂直居中效果

transform: translateY(-50%) 实现元素垂直居中效果
transform:translate(-50%,-50%)实现水平垂直居中
通过position absolute和top 50%，结合transform产生效果。

eg.头部CSS排版

<style  lang="stylus"  rel="stylesheet/stylus">
.top_container
    background-color #02a774
    position fixed
    z-index 100
    width 100%
    height 45px
    left 0
    top 0
    border-radius 3px
    .top_left
        position absolute
        left 15px
        top 50%
        transform translateY(-50%)
    .top_center
        position absolute
        top 50%
        width 50%
        left 50%
        transform translate(-50%, -50%)
        text-align center
    .top_right
        position absolute
        top 50%
        right 15px
        font-size 14px
        transform translateY(-50%)
        text-align center
</style>

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。

transform: translateY(-50%)垂直居中：
让div 沿Y轴平移自身高度的一半。

同理，transform: translateX(-50%)为水平居中。

transform:translate(-50%,-50%)水平垂直居中：
当使用：top: 50%;left: 50%;， 是以左上角为原点，往上（x轴）,左（y轴）移动自身长宽的 50%，故不处于中心位置。