引子
一直以為對這個問題已經(jīng)有很好的解決方案了移斩，代碼如下。
/*
* .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上設(shè)置子元素的寬度為100%時翰苫，這個居中便會失效，即使父元素設(shè)置了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;
}
