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

欢迎来到奇迪科技(深圳)有限公司,超值服务提供卓越产品!

网络编程

CSS垂直居中,DIV+CSS,文字上下垂直居中

作者:qvdv 来源:www.qvdv.com更新时间:2019-01-08

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


1、CSS,使用 flex,使文字上下居中:

    <div class="box" style="display: flex;align-items: center">
        <img src="https://www.qvdv.com/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+

本文版权所有,转载须注明:来源  https://www.qvdv.com/qvdv-oop-867.html