文字居中input文字垂直居中

最新推荐文章于 2024-05-31 12:30:47 发布

原创最新推荐文章于 2024-05-31 12:30:47 发布 · 5.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#文字垂直居中兼容苹果安卓

前端同时被 2 个专栏收录

2 篇文章

订阅专栏

文字垂直居中

1 篇文章

订阅专栏

本文探讨了在移动端开发中遇到的文字垂直居中问题，包括div、弹性盒子、绝对定位等多种方法，并针对安卓设备的兼容性问题提出了解决方案，如使用特定安卓属性和transform技巧，提供了一套全面的垂直居中策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做移动端都会遇到文字垂直居中的问题，特别是有些手机真的很难调整，然后就是必须要文字居中，那就说说几种文字垂直居中的问题吧。
普通的元素例如div
1.这种居中，利用padding上下值来居中。
2.知道高度用line-height来，但是这个一般在安卓手机都有点不是很彻底的居中，偏下一点点。
3.利用弹性盒子display：flex；align-items: center;也能垂直居中；
如果是利用父子两个元素；上述的方法都行，在此基础上补充几个；
4.利用绝对定位。父级position: relative;子元素： position: absolute; top: 0;bottom: 0; margin: auto;
5.同样是绝对定位。父级position: relative;子元素： position: absolute; top: 50%;transform: translate(0, -50%);
6.如果是利用标签的属性，比如button，input这些都是可以自己垂直居中的；
7.当然，这些我全部试过，但是在安卓某些手机上依旧是偏上一点，这就很蛋疼了。后来也是自己寻找利用安卓的属性来特定的设置的方法，例如

isAndroid: function(){
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/android/i) == "android") {
        return true;
    } else {
        return false;
    }
  },
if(isAndroid()){
    $('.div').addClass('android');
}
.div{
    margin-top: 7px;
}
.div.android{
    margin-top: 10px;
}

但是这样写有点繁琐，因为每个页面很多地方都有可能需要。但是这是处理比较好的方式了，
8.还有就是利用transform先放大在缩小，但是这样一来就会把元素的占位放大一倍；而且仔细看还是有一点不居中，不过好多了。
9.内行高+line-height：normal；也能垂直居中,

<div style="box-sizing: border-box; padding: 5px; line-height: normal; font-size: 11px;">
  <span>嘿嘿</span>
</div>

10.行高+font-size:initial这样也能垂直居中。

<divstyle="line-height: 26px; font-size: initial;">
  <span style="font-size: 11px;"> 嘿嘿</span>
</div>

介绍了这些垂直居中的方法，总有一种适合你的