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%)实现；