【手机验证码】+86垂直居中的有趣问题

在做+86 的垂直居中时,发现了一些有趣的问题,分享一下。顺便复习下垂直居中的写法。

具体问题

在输入框的左侧显示的+86 要进行垂直居中,我想着应该挺简单的,flex 布局来个 align-items: center;不就搞定了吗 示例代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      #app {
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .container {
        width: 240px;
        height: 54px;
        background-color: #eee;
        cursor: pointer;
        color: #485633;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <div class="plus">+&nbsp;</div>
        <div class="number">86</div>
      </div>
    </div>
  </body>
</html>

同样的代码在 Windows 和 Mac 上显示的结果却不同:

Windows 下的效果如下,可以看到+和 86 都较好的垂直居中了

而 Mac 上的效果如下, 虽然完成了垂直居中,但是+ 和 86 的位置不太好

具体原因不太清楚

解决方案

与其说是解决方案,其实就是按照给的 ui 设计图明确下个两个元素的 height 和 margin,保证其对齐了,也算解决了问题

css 复制代码
.plus {
  height: 34px;
  line-height: 34px;
  margin: 9px 0 11px;
}
.number {
  height: 44px;
  line-height: 44px;
  margin: 5px 0;
}

这样 Mac 上的对齐情况就好了

垂直对齐写法

顺便复习下 css 的垂直居中写法

flex 布局

flex 布局算是最常用的一种布局方式,通过 align-items 控制垂直对齐

css 复制代码
.container {
  display: flex;
  align-items: center;
}

line-height 单行文本

通过设置行高等于容器高度,仅适用于单行文本或行内元素,上面的解决方案也使用了

css 复制代码
.container {
  line-height: 34px;
  height: 34px;
  text-align: center;
}

absolute + transform

适用于未知宽高的元素,通过 translate 调整元素自身宽高的 50%,实现精准居中

css 复制代码
.parent {
  position: relative;
  height: 200px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

grid 布局 ​

通过 place-items 简写属性实现水平和垂直居中,兼容性略低于 Flexbox

css 复制代码
.container {
  display: grid;
  place-items: center;
}

常用的垂直居中方法就这些,有其他的方法欢迎评论区补充

相关推荐
上单带刀不带妹4 分钟前
ES6 中的 Proxy 全面讲解
前端·ecmascript·es6·proxy
11054654011 小时前
37、需求预测与库存优化 (快消品) - /供应链管理组件/fmcg-inventory-optimization
前端·信息可视化·数据分析·js
nunumaymax1 小时前
在图片没有加载完成时设置默认图片
前端
OEC小胖胖2 小时前
【React 设计模式】受控与非受控:解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
你怎么知道我是队长2 小时前
C语言---编译的最小单位---令牌(Token)
java·c语言·前端
一枚前端小能手3 小时前
🔥 Vue状态管理越写越乱,Pinia拯救了我
前端
cloudcruiser3 小时前
Apache HTTP Server:深入探索Web世界的磐石基石!!!
前端·其他·http·apache
一个专注api接口开发的小白3 小时前
手把手教程:使用 Postman 测试与调试淘宝商品详情 API
前端·数据挖掘·api
织_网4 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron
vvilkim4 小时前
深入理解 Spring Boot Starter:简化依赖管理与自动配置的利器
java·前端·spring boot