translate 實現元素垂直居中

<div class="demo2">
            <span>about me</span>
        </div>

css

.demo2{
            width: 200px;
            height: 200px;
            border:1px solid red;
            position: relative;
        }
        .demo2 span{
             position:absolute;
             top:50%;
             left:50%;
             -webkit-transform: translate(-50%,-50%);
             -moz-transform: translate(-50%,-50%);
            transform:translate(-50%,-50%);
        
        }

原理：

定位span元素，left：50%； top：50%； 元素的參考點在元素的左上角，實現徹底居中，須要再向上 向左移動元素高度 寬度的一半，使用transform:translate(-50%, -50%)實現；