登录

css - UC手机浏览器下如何让div水平垂直居中。

UC浏览器在宽高固定下,margin:auto,上下左右0;不能水平垂直居中是什么原因?

CSS#globalTip{
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    z-index: 99999;
    width:75%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #000;
    color:#fff;
    font-size: 1.6rem;
    border-radius: 20px;
}

如果position:absolute就可以,但这并不是我想要的。

# CSS3
PHP中文网PHP中文网2110 天前685 次浏览

全部回复(4) 我要回复

  • 大家讲道理

    大家讲道理2017-04-17 11:12:16

    display: table-cell;
    vertical-align: middle;

    回复
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:12:16

    我后来换了另一种水平垂直居中写法

    css#globalTip{
        position: fixed;
        left:50%;
        top:50%;
        z-index: 99999;
        margin-left: -35%;
        margin-top:-25px;
        width:75%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: nth($theme-color,1);
        color:#fff;
        font-size: 1.6rem;
        border-radius: 20px;
    }
    

    但依然想知道UC浏览器用原写法怎么解决bug

    回复
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:12:16

    在absolute和fixed定位方式下使用

    #globalTip{
        position: fixed;
        left:50%;
        top:50%;
        -webkit-transform:translate3d(-50%,-50%,0);
        transform:translate3d(-50%,-50%);
    }

    回复
    0
  • 怪我咯

    怪我咯2017-04-17 11:12:16

    我也遇到了相同的问题
    uc下 水平垂直居中不管事
    解决方案

    .box{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    回复
    0
  • 取消回复发送