search

Home  >  Q&A  >  body text

css - 移动端页面文字垂直居中兼容性问题

阿神阿神2781 days ago1288

reply all(11)I'll reply

  • 迷茫

    迷茫2017-04-17 14:31:58

    The current more effective solution is transform, which doubles the size and then reduces it by half, but it is cumbersome to write and affects the layout. I also want to know if there is any good and convenient method

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 14:31:58

    I have been struggling with this problem for an afternoon today. The performance on Android is abnormal, but the performance on PC and Mac is good. If it is normal, use margin offset to align. In extreme cases, it is more reliable to transform absolute positioning and center.

    reply
    0
  • 怪我咯

    怪我咯2017-04-17 14:31:58

    You can try vertical-align. In addition, it is difficult for others to answer without code. You can use codepen to make an online demo to facilitate the answerer

    reply
    0
  • 怪我咯

    怪我咯2017-04-17 14:31:58

    Use flex layout to achieve vertical centering with just a few lines of code. Just search for the tutorial and you’ll find it

    reply
    0
  • 迷茫

    迷茫2017-04-17 14:31:58

    1. Table method:

    Implementation method: The table content is originally vertically centered and can be processed by simulating the table.

    <p class="box_center">
        <p class="inner"></p>
    </p>
    
    .box_center {
        display: table-cell;
        width: 300px;
        height: 300px;
        text-align: center;
        vertical-align: middle;
    }
    .box_center .inner {
        display: inline-block;
    }
    

    2.vertical-align: middle
    Implementation method: Use empty element placeholder to implement

    <p class="box_center">
        <p class="placeholder"></p>
        <p class="inner"></p>
    </p>
    
    .box_center {
        width: 300px;
        height: 300px;
        text-align: center;
    }
    .box_center .inner {
        display: inline-block;
    }
    .box_center .placeholder {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
    

    3. Absolute positioning

    .box_center {
        width: 300px;
        height: 300px;
        background: #ccc;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    

    4. Use transform to achieve

    .box_center {
        position: absolute;
        width: 300px;
        height: 300px;
        background: #ccc;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    

    Compatibility: The Android2.3 system browser does not support the direct use of fixed for container positioning, and adding a fixed container can solve the problem.

    Conclusion:

    Recommended transform implementation

    reply
    0
  • 黄舟

    黄舟2017-04-17 14:31:58

    display:-webkit-flex;
    justify-content:center;
    align-items:center;
    width:100px;
    height:28px;

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 14:31:58

    Try changing your line-height to 30px

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 14:31:58

    It is more suitable to use line-height and vertical-align together

    reply
    0
  • 黄舟

    黄舟2017-04-17 14:31:58

    It is true that the simulator simulates vertical centering, but in actual mobile phones, Apple phones render it vertically centered, and Android phones render it higher. The compatible method is not to set height, line- The height is set to 1, and the padding value is equal to the top and bottom to maintain vertical centering.

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 14:31:58

    Pixel density problem, for example, if your height is 20px, the line height is also 20px. If the pixel density is an even number, there is no problem. If it is an odd number, there will be a problem, so it is generally best to match the height and font size settings, such as The text is 14px, and the height is an even number. The text is 15px, and the height is an odd number

    reply
    0
  • Cancelreply