【前端】移动端页面文字垂直居中兼容性问题

【前端】移动端页面文字垂直居中兼容性问题
（图1）
【前端】移动端页面文字垂直居中兼容性问题
（图2）
【前端】移动端页面文字垂直居中兼容性问题
（图3）
【前端】移动端页面文字垂直居中兼容性问题
（图4）

第1张图是chrome模拟器里的效果。
第2、3张图是两台手机里的效果。
第4张图是按钮的样式。

按钮的高度和行高相等，文字应该垂直居中。
第1张图chrome模拟器中是正确的，第2张图中的效果也基本正常，但第3张图中的文字明显偏上了。
单位试过 rem，也试过 px，都会存在这种情况。
有没有人能分析一下问题的原因？
有没有完全兼容的解决方案？

明确一下我的问题：一行文字，设置成在该行垂直方向居中，PC端正常，移动端有的正常，但有的明显偏上，这个问题是怎么产生的，有没有解决方案？

【前端】移动端页面文字垂直居中兼容性问题
元素长宽、字体大小先扩大为两倍，再用 scale 缩小为一半大小后的结果，效果确实好了一点，但感觉还是有一点点偏上。

2018.3.6补充
不知道业内的专业名称是怎样的，我自己把前端中的像素模式分为两类：物理像素模式和设备独立像素模式。
物理像素模式：css中的1px永远对应1个物理像素。
设备独立像素模式：css中的1px是1个设备独立像素，设备独立像素最终会被换算成物理像素，1个设备独立像素可能对应1个物理像素，可能对应2个物理像素，也可能对应其他数量的物理像素，这主要跟屏幕的设备像素比（dpr，device pixel ratio）有关。比如，iPhone6 的dpr是2，则在iPhone6中，在设备独立像素模式下，css中的1px对应2个物理像素。
默认情况下，网页都是物理像素模式，一般通过加入后面这行代码来开启设备独立像素模式：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
出现这里提到的垂直居中兼容性问题，可能是浏览器在将设备独立像素换算成物理像素时出现了误差。所以，在没有必要开启设备独立像素模式的情况下，删除上面的那句代码，让浏览器以物理像素模式渲染页面，或许可以避免这个问题。

回答

目前比较有效的解决方法就是transform，放大一倍再缩小一半，但是写起来繁琐而且影响布局。我也想知道有没有什么既好又方便的方法

模拟器模拟出来的是垂直居中的没错，但是在实际手机中，苹果手机渲染出来是垂直居中的，安卓手机渲染出来就是会偏上一些，兼容的方法就是不要设置height，line-height设置为1，用padding值上下相等来保持垂直居中。

今天这个问题也纠结了研究了一个下午，安卓机下表现异常，PC、苹果机表现良好，如果一般情况，用margin偏移量来对齐，极端情况还是transform绝对定位居中比较靠谱。

这个span带边框的情况垂直居中确实有兼容性问题, 提供其他的思路, 让设计给svg

用过一种方法是，用如下代码判断，是否是安卓
如果是安卓的话，就用margin-top设置多2~3个像素

isAndroid: function(){
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/android/i) == "android") {
        return true;
    } else {
        return false;
    }
  },

if(isAndroid()){
    $('.bank-list-new').addClass('android');
}

.bank-list-new{
    margin: 10px auto;
}
.bank-list-new.android{
    margin-top: 13px;
}

像素密度问题，比如你是20px的高，行高也是20px，如果像素密度是偶数，也没问题，如果是奇数，就有问题了，所以一般最好高度和字体大小设置匹配，比如文字14px，高度也用偶数，文字15px，高度用奇数

我也遇到了这个问题，原本用< a >标签写的按钮，后来改用button就好了。给个高度，不用写行高，自动垂直居中。

你可以试试vertical-align，另外，没有代码别人不好回答，你可以用codepen做在线demo，方便回答者

用flex布局，几句代码就搞定垂直居中了。教程搜一下就有了

1.表格方法：

实现方法：表格内容本来就是垂直居中的，可以通过模拟表格处理。

<div class="box_center">
    <div class="inner"></div>
</div>
.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
实现方法：利用空元素占位实现

<div class="box_center">
    <div class="placeholder"></div>
    <div class="inner"></div>
</div>
.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.绝对定位

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

4.使用 transform 实现

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

兼容性：Android2.3 系统浏览器不支持容器直接使用 fixed 进行定位，外加 fixed 容器可解决。

结论：

推荐transform 实现

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

你的line-height改30px试试

line-height和vertical-align一起使用才更配哦

以上是 【前端】移动端页面文字垂直居中兼容性问题 的全部内容， 来源链接： utcz.com/a/78421.html

回到顶部