关于布局中垂直居中，踩过的坑（解决了，但是还是稀里糊涂的）

最新推荐文章于 2023-09-06 10:48:25 发布

原创最新推荐文章于 2023-09-06 10:48:25 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端页面的坑专栏收录该内容

50 篇文章

订阅专栏

本文探讨了在使用CSS布局时遇到的垂直居中问题，通过调整font-size属性解决了inline-block元素的基线对齐问题，并附上了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天拿了一个页面练手，刚写了三行，碰见一垂直居中问题。没有问题的代码截图如下：

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