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;
}