浏览器默认文字大小:16px
行高:是基线与基线之间的距离
行高=文字高度+上下边距
一行文字行高和父元素高度一致的时候,垂直居中显示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .box1 { 400px; height: 200px; background-color: aliceblue; line-height: 200px; } </style> </head> <body> <div class="box1"> 你好 </div> </body> </html>
效果:
注释:因为行高的定义是文字高度+上下边距,所以当行高定义的值与父元素一样时,它就会去找上下边距,自然的就会居中。