极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:300px;
height:70px;
border:1px solid red;
font-size:30px;
line-height:70px;
vertical-align:middle;
text-align:center;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div>
<p>hello world</p>
</div>
</body>
</html>
效果如下：
ling-height = div的height 不起作用？
vertical-align:middle; 也不起作用。
你把div限制死了，p溢出来了当然不居中
你把css里的div 改成p就居中了
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
width:300px;
height:70px;
border:1px solid red;
font-size:30px;
line-height:70px;
vertical-align:middle;
text-align:center;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div>
<p>hello world</p>
</div>
</body>
</html>父级：
display: table-cell;
vertical-align: middle;
height: 65px;
width: 65px;子级：
display: inline-block;
vertical-align: middle;2 回答1.4k 阅读✓ 已解决
2 回答828 阅读✓ 已解决
1 回答1.1k 阅读✓ 已解决
1 回答814 阅读✓ 已解决
2 回答751 阅读
1 回答720 阅读✓ 已解决
2 回答1k 阅读
看这么多大神都给你答案了，你还没有采纳，我决定来个终极答案；
且看图：
图蓝色区域是div元素的盒子，砖红色区域是div块级元素的占位
图蓝色区域是p元素的盒子，上下的砖红色区域是p元素在chrome中的默认margin值，浏览器显示是1em;
那这个1em是多少呢，em是一个相对单位，相对于父容器的文字大小
也就是说，父容器font-size多大，子容器中1em就是多大，那这里父容器font-size是35px那这个上margin和下margin就各是35px；
另外：你p标签没有设置文字大小，其继承了父容器的font-size,所以p中文本字号也是35px
解释了你的问题，然后再给你一个解决方案，怎么让文字垂直居中呢，简单了，去掉margin就OK
