前端垂直居中方法大全

Love The Way You Lie 2022-05-17 07:57 134阅读 0赞

## 定位 ##

.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>