div里内容垂直居中

2025-11-05 04:51:30

1、新建html页面，并在页面上添加div，为了区分明显已对div设置了边框。效果如图所示

div里内容垂直居中

2、方法1：设置行高（line-height）和垂直（vertical-align）对齐方式让div的内容垂直居中。效果如图

div里内容垂直居中

3、方法二：设置内边框（padding-top）让div里内容垂直居中。

需注意：由于padding-top会把div增高，所以使用时需要把div的高度相应的减少。效果如图：

div里内容垂直居中

4、对应代码：

<!doctype html>

<html>

<head>

<title>div里内容垂直居中</title>

div{ margin-bottom:5px;}

.mar{ margin:0 auto; width:800px; border:1px solid #e7e7e7; height:300px; padding:15px;}

#first{

height:60px;

border:1px solid #69F;

line-height:60px;

vertical-align:middle;

}

#second{

height:40px;

border:1px solid #F96;

padding-top:20px

}

</style>

</head>

<body>

<div id="first">我是line-height设置内容垂直居中的</div>

<div id="second">我是padding-top设置内容垂直居中的</div>

</div>

</body>

</html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。