引子

一直以为对这个问题已经有很好的解决方案了，代码如下。

/*
* .parent: 父元素
* .child: 子元素
*/
.parent {
    height: 50px;
    width: 50px;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
}

.parent:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.child {
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
    /*width: 100%;*/
}

谁知道今天踩了UC浏览器的坑，才有了另一个方案。先来说说起因。

UC上设置子元素的宽度为100%时，这个居中便会失效，即使父元素设置了font-size: 0这个样式。于是去张鑫旭的博客查阅了一下，有了下面这个针对UC的解决方案。

/*
* .parent: 父元素
* .child: 子元素
*/
.parent {
    height: 50px;
    width: 50px;
    line-height: 50px;
    font-size: 0;
}

.child {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    line-height: normal;
    font-size: 1rem;
}