昨天拿了一个页面练手，刚写了三行，碰见一垂直居中问题。没有问题的代码截图如下：
html:
css:
html,body,div,ul,li,span,img,input{
padding: 0;
margin: 0;
font-size: 72px;
box-sizing:border-box;
}
div{
display: inline-block;
}
#wrapper{
position: absolute;
top: 0.455rem;
}
header{
position: fixed;
width: 100%;
height: 1.222rem;
line-height: 1.222rem;
background-color: #F9F9F9;
font-size: 0;
}
header input{
margin-left: .416rem;
height: 0.722rem;
width: calc(100% - 1.722rem);
/* margin-right: .2rem; */
border-radius: .361rem;
vertical-align: middle;
font-size: 0.361rem;
text-indent: 1rem;
color: #333333;
background-color: #ececec;
}
input::-webkit-input-placeholder{
color:red;
}
input:-moz-placeholder{ /* Mozilla Firefox 19+ */
color:red;
}
input::-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:red;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:red;
}
#search{
position: absolute;
/* float: left; */
left: .5rem;
z-index: 99;
}
#search img{
width: 0.611rem;
height: 0.611rem;
border-radius: .361rem;
z-index: 99;
vertical-align: middle;
}
#clock{
width: .611rem;
position: relative;
left: .278rem;
font-size: 0;
}
#clock img{
vertical-align: middle;
width: 100%;
height: 100%;
}1.我在页面之初，为了布局方便，打算采用rem的形式，所以预先设置了html,body,div,ul,li,span,img,input等元素的font-size:72px
2.在进行布局时,我没有给header设置任何的font-size ，也没有给直接给包裹着imgde DIV（id为clock）置任何的font-size,input 设置垂直居中，时钟的IMG设置垂直居中，就出现了下面的现象（为了更好说明问题，我将header背景做一下重新设置）；
3.在给header 添加完font-size：0 ，情况貌似更糟糕了
4.但是当我给div（id为clock）添加上font-size之后，神奇般的正常了
查了资料，
说是垂直居中的基线问题，原本元素对齐的基线是baseline 。设置完font-size 后，会将inline-block元素的默认基线设置为文字的base-line。
资料来源：https://www.cnblogs.com/charling/archive/2013/10/15/3371060.html