父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码:
<div class="container"> hi,imooc! </div>
css代码:
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
完整代码:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> .wrap h2{ margin:0; height:100px; line-height:100px; background:#ccc; } </style> </head> <body> <!--下面是代码任务部分--> <div class="wrap"> <h2>hi,imooc!</h2> </div> </body> </html>