flex布局也可以实现,这里不再介绍;
第一种:line-height与父亲设置一样的heigth;
<div class="parent">
<span class="child">hei,boy next door!</span>
</div>
<style>
.parent {
height: 100px;
width: 500px;
background-color: aqua;
}
.child {
line-height: 100px;
}
</style>
注意:line-height的方式,
①line-height:30px;
②line-height:2;(line-height:32px),因为一般浏览器默认的行高为16px;
③line-height:200%;(line-height:32px),同上;
方案二:利用vertical-align: middle:
<div class="parent">hei,boy next door!</div>
<style>
.parent {
height: 100px;
width: 500px;
background-color: aqua;
vertical-align: middle;
display: table-cell;
}
</style>
注意:vertical-align: middle不起作用,因为vertical-align属性只对行内元素有效,对块内元素无效,设置display: table-cell;