在做+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">+ </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;
}
常用的垂直居中方法就这些,有其他的方法欢迎评论区补充