内联元素垂直居中方法汇总

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所示

这里我们需要的是垂直居中对齐效果, 所以很多人都使用具有强烈语义的 vertical-align: middle; 来控制图标的垂直位置. 然而由于 middle 并不是真正意义上的垂直居中, 因此还是会有像素级别的误差, 误差大小与字体和字号均有关
如图2所示, 图标往下多偏移了1像素而导致容器的可视高度变为21像素

但是如果我们使用精确的数值, 则一切尽在掌握之中
例如, 设置 vertical-align: -5px;, 此时图标和文字实现了真正意义上的垂直居中, 此时容器的可视高度和当前行高20像素保持了一致, 如图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;
}