1. 让 line-height 与 height 相等
.container { width: 1rem; height: 1rem; line-height: 1rem; font-size: 0.12rem; color: green; background: lightblue;
}这种方法并不是绝对的居中, 会有几像素的偏差. 张鑫旭大神说这是由于字体不同而引起的, 另外和字体大小也有关系
2. 用 Flex 布局实现垂直+水平居中 (推荐)
.container { width: 1rem; height: 1rem; font-size: 0.12rem; color: green; background: lightblue;
display: flex; justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */}知识点补充
我们来看一个简单的小图标对齐的例子
假设有一个 display 值为 inline-block 的尺寸为 20*20 像素的小图标. 默认状态下, 文字是明显偏下的, 如图1所示
图1
这里我们需要的是垂直居中对齐效果, 所以很多人都使用具有强烈语义的 vertical-align: middle; 来控制图标的垂直位置. 然而由于 middle 并不是真正意义上的垂直居中, 因此还是会有像素级别的误差, 误差大小与字体和字号均有关
如图2所示, 图标往下多偏移了1像素而导致容器的可视高度变为21像素
图2
但是如果我们使用精确的数值, 则一切尽在掌握之中
例如, 设置 vertical-align: -5px;, 此时图标和文字实现了真正意义上的垂直居中, 此时容器的可视高度和当前行高20像素保持了一致, 如图3所示
图3
代码如下
html
<p>请选择<i class="icon-arrow"></i></p><p>请选择<i class="icon-arrow valign-1"></i></p><p>请选择<i class="icon-arrow valign-2"></i></p>
css
.icon-arrow { display: inline-block; width: 20px; height: 20px; background: url(arrow.png);
}.valign-1 { vertical-align: middle;
}.valign-2 { vertical-align: -5px;
}
作者：小贤笔记
链接：https://www.jianshu.com/p/271fc19110ec