导读：操作步骤/方法1新建html页面，并在页面上添加v，为了区分明显已对div设置了边框。效果如图所示2方法1：设置行高（line-height）和垂直（vertical-align）对齐方式让v的内容垂直居中。效果如图3方法二：设置内边框（padng-top）让div里内容垂直居中。4需注意：由于padding-top会把div增高，所以使用时需要把div的高度相应的减少。效果如图：5对应代码：6&...
操作步骤/方法
1
新建html页面，并在页面上添加v，为了区分明显已对div设置了边框。效果如图所示
2
方法1：设置行高（line-height）和垂直（vertical-align）对齐方式让v的内容垂直居中。效果如图
3
方法二：设置内边框（padng-top）让div里内容垂直居中。
4
需注意：由于padding-top会把div增高，所以使用时需要把div的高度相应的减少。效果如图：
5
对应代码：
6
<!doctypehtml>
7
<html>
8
<head>
9
<metacharset="utf-8">
10
<title>div里内容垂直居中</title>
11
<styletype="text/css">
12
v{margin-bottom:5px;}
13
.mar{margin:0auto;width:800px;border:1pxsolid#e7e7e7;height:300px;padding:15px;}
14
#first{
15
height:60px;
16
border:1pxsolid#69F;
17
line-height:60px;
18
vertical-align:middle;
19
}
20
#second{
21
height:40px;
22
border:1pxsolid#F96;
23
padding-top:20px
24
}
25
</style>
26
</head>
27
<body>
28
<divclass="mar">
29
<divid="first">我是line-height设置内容垂直居中的</div>
30
<divid="second">我是padding-top设置内容垂直居中的</div>
31
</div>
32
</body>
33
</html>
END
以上就是小编为大家介绍的div里内容垂直居中的全部内容，如果大家还对相关的内容感兴趣，请持续关注上海建站网！
标签：
内容声明：网站所展示的内容均由第三方用户投稿提供，内容的真实性、准确性和合法性均由发布用户负责。上海建站网对此不承担任何相关连带责任。上海建站网遵循相关法律法规严格审核相关关内容，如您发现页面有任何违法或侵权信息，欢迎向网站举报并提供有效线索，我们将认真核查、及时处理。感谢您的参与和支持！
