CSS垂直居中，DIV+CSS，文字上下垂直居中_网络编程_奇迪科技(深圳)有限公司(www.qvdv.net)

文字上下居中，是经常要用到的效果，CSS中，多种方法使得文字可以上下居中：

1、CSS，使用 flex，使文字上下居中：

    <div class="box" style="display: flex;align-items: center">
        <img src="https://www.qvdv.net/public/images/logo.png">上下居中
    </div>

兼容：IE10+

2、在css中，使用绝对定位和transform

CSS代码：
<style type="text/css">
    .box{
        position: relative;
        height:100px;
        background-color: #9F9F9F
    }
    .box1 span{
        position:absolute;
        left: 0;
        top:50%;
        transform: translate(0, -50%);
    }
</style>

HTML代码：
    <div class="box">
        <div class="box1">
            <span>上下居中</span>
        </div>
    </div>

兼容：IE7+