<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
p
{
width: 310px;
height: 110px;
line-height: 110px;
background-color: yellow;
border: 1px solid red;
}
div
{
box-sizing: border-box;
width: 100px;
height: 80px;
border: 1px solid yellow;
/*line-height: 80px;*/
line-height: 20px;
padding-top: 20px;
padding-bottom: 20px;
/*行高:80px-(padding-top+padding-bottom)等于40px,再除以2,为什么因为有两行等于垂直居中的行高*/
}
</style>
</head>
<body>
<p>66666666666666666666666666</p>
<div>我是文字我是文字我是文字</div>
<!--如果盒子有两行的把。/2就能得到垂直居中的行高了。细品·把。-->
</body>
</html>