常用的CSS水平垂直居中方法大全

一时失言乱红尘 2021-09-18 18:16 337阅读 0赞

作为一名程序媛  
在编写页面的时候  
经常还会遇到水平或者垂直居中的一些布局  
今天正好有空  
就把各种居中的方式都总结了一下  
分享给大家  
希望能给大家带来帮助

1.已知宽高背景图与背景图上的文字都水平垂直居中

.img-bg{
        position: absolute;
        background: url("http://source.kakehotels.com/kake/frontend/img/flashsales-icon.png") no-repeat;
        width: 90px;
        height: 90px;
        background-size: 100%;
        top:0;
        bottom:0;
        left:0;
        right: 0;
        margin:auto;
        line-height: 90px;
        font-size: 12px;
        color: #fff;
    }

![图片描述][1129070787-59264d22ce7c9_articlex]

2.有宽度的div水平居中

.width-center{
        width: 300px;
        text-align: center;
        margin: 0 auto;
        background:pink;
    }

![图片描述][3081013319-5926529972efc_articlex]

3.有绝对定位的div水平居中

.position-center{
        position: absolute;
        top:0;
        bottom: 0;
        width: 300px;
        height: 300px;
        margin: auto 0;
        background: pink;
        text-align: center;
    }

![图片描述][996915762-59264ff828d8c_articlex]

4.有绝对定位的div水平跟垂直都居中

.vertical-center-position{
        position: absolute;
        width: 300px;
        height: 300px;
        background: #f5f5f5;
        text-align: center;
        top:0;
        bottom:0;
        left:0;
        right: 0;
        margin:auto;
    }

![图片描述][2150794169-59265054f3126_articlex]

5.已知宽高的容器的水平垂直方向居中

.vertical-center-width{
        width: 300px;
        height: 300px;
        position: absolute;
        background: #f5f5f5;
        text-align: center;
        top:50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -150px;
    }

![图片描述][3878061442-592650af359a1_articlex]

6.未知宽高的容器的水平垂直方向居中注：transform属性，低版本浏览器不兼容，例如IE8

.vertical-center-nowidth{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

![图片描述][2353883560-592650bc7bf86_articlex]

7.水平垂直居中记得要想到flexbox此时.div无论是否已知宽高，都能两个方向居中

.container{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container div{
        color: pink;
    }

8.手机端垂直居中弹框

<div class="popupBg"></div>
        <div class="popup">
        <img src="images/fudai-dialog.png"/>
    </div>
    .popupBg{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.8);z-index: 100;}
    .popup{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);z-index: 100;background: #FFF;}

[http://www.weste.net/2014/12-...][http_www.weste.net_2014_12-...]  
以上就是8种常用的css水平垂直居中方法，大家可以在实际项目中加以运用，

[1129070787-59264d22ce7c9_articlex]: /images/20210726/08ec9ddca4494d5594eb495d5a240faf.png
[3081013319-5926529972efc_articlex]: /images/20210726/ef717c89d6e04dfba4c87961e66838c2.png
[996915762-59264ff828d8c_articlex]: /images/20210726/95657470f03e43449880e3113ae8182d.png
[2150794169-59265054f3126_articlex]: /images/20210726/f74834a990a64f139a9885f903dc3308.png
[3878061442-592650af359a1_articlex]: /images/20210726/a317773ec65b4b21b2d1e571beb261d2.png
[2353883560-592650bc7bf86_articlex]: /images/20210726/958c0054bb444fff9f8b9e3310980a89.png
[http_www.weste.net_2014_12-...]: http://www.weste.net/2014/12-25/100787.html