前端垂直居中方法大全

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mangxi8200/article/details/81513464

定位

.div1{
            /*优点:所有浏览器支持*/
            /*缺点：固定宽高，灵活性不好*/
            /*法一*/
            /*position: absolute;*/
            /*法二*/
            position: fixed;
            top:50%;
            left: 50%;
            width: 120px;
            height: 120px;
            margin-left: -50px;
            margin-top:-50px;
            background-color: #f00;
        }

.div2{
            /*IE6,IE7不支持*/
            /*优点：宽高可以任意变化*/
            /*法三*/
            /*position: absolute;*/
            /*法四*/
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 140px;
            height: 140px;
        }

display:table-cell

.div3{
            display: table-cell;
            vertical-align: middle;
            /*width: 900px;*/
            /*height: 200px;*/
            text-align: center;
            /*margin: auto;*/
            background-color: #f00;
            /*float: left;*/
            /*出现浮动就不能用*/
            /*只能实现行内、行内块元素居中，只是水平不能居中，行内还是可以的，可以在内部块级元素设置margin:auto实现水平居中*/
            /*IE7不支持*/
            /*div3高度确定table-cell，div3高度不确定外层套一层设置display:table*/
        }
        .div3 img{
            width: 40px;
            background-color: #0f0;
        }

        .outer-table{
            display: table;
            width: 100%;
            height: 100%;
        }

针对行内、行内块元素

 /*第六种针对行内、行内块元素*/
        .div7{
            height: 198px;
            line-height: 198px;
            text-align: center;
            background-color: #f00;
        }
        .div7 img{
            width: 10%;
            display: inline;
        }

css3（IE9以下不支持*）

 /*第七种  IE9以下不支持*/
        .div8{
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            height: 190px;
            background-color: #f00;
        }
        .innerbox{
            width: 70px;
            height: 80px;
            background-color: #0f0;
        }


        /*第八种 IE9以下不支持*/
        .div9{
            width: 100px;
            height: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #f00;
        }

使用dispaly：inline-block 和 vertical-align 还有伪类实现

只有inline-block，inline还有table的东西能用vertical-align这个属性

/*第9种---最好的--以参考线为基准*/
        /*使用dispaly：inline-block 和 vertical-align 还有伪类实现*/
        .div10{
            height: 500px;
            text-align: center;
            background-color: #f00;
        }
        .div10:before{
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            background-color: #000;
        }
        .inner10{
            display: inline-block;
            width: 100px;
            vertical-align: middle;
            background-color: #0f0;
        }
html结构
<div class="div10">
    <div class="inner10">cwq</div>
</div>