极客观点
项目管理
HarmonyOS
首先上图：
由图可以看出，那个checkbox没有上下居中，html的标签结构如图：
每个li下面的span都有相同的样式，行内块加左浮动，只是宽度不同，做了区别处理，那么问题来了：
这是第一个span盒子（里面包了一个复选框）
这是后面的span盒子（就是一个span，里面包含了文字）
问题所在就是，可以看出前面的那个span盒子的高度没有继承到父元素的高，而是被内里的复选框撑高的，而后面的span盒子则继承到了父元素的高度，这就导致了后面盒子的文章内容能够正常的水平垂直居中，而第一个span盒子内的复选框则不能，只能水平居中，无法垂直居中（控制台能看到span盒子的高度是被复选框撑高的，所以尽管它能够垂直居中，效果上却并没有实现，而是如图刚好贴着顶部）。而最最蛋疼的是，同样的这个页面，我如果把他作为一个单独完整的html打开则又是正常的（出现问题的是这个页面作为一个iframe页面嵌入到一个模板页面中才出现了这个问题），下图是正常的单独页面效果（不嵌入模板页面）
同时，我在控制台仔细的对比了二者的样式，发现它们二者并没有因为样式继承而不同（就是嵌套进那个模板页面后，该页面的这个盒子内容也没有继承其他的一些样式，和单独页面的样式一样的）。
说了这么多，图片对比也很明显了，我就是先问问有没有人知道造成这二者区别的因素是什么？是一个页面作为iframe标签嵌套进另一个页面后，checkbox标签就不正常了嘛？（可是如我前面所说的，我仔细对比了二者，包括他们对应的父元素span盒子，他们二者的样式是一样的，继承的样式也是一样的，也就是说可以排除因样式继承的差别而导致的差别这样假设）
这里我补充一点：有兴趣的大神，想要写页面来亲自调试该效果的，可以直接复制：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子在父元素内居中</title><style>
body,html{
width: 100%;
height: 100%;
clear: both;
padding: 0;
margin: 0;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}.list_item{
overflow: hidden;
text-align: center;
height: 35px;
line-height: 35px;
border-bottom: 1px solid #999999;
color: #555555;
font-weight: 500;
}
.list_item_td{
display: inline-block;
float: left;
overflow: hidden;
}
.o{
width: 5%;
}
.t{
width: 10%;
}
.th{
width: 20%;
}
.f{
width: 15%;
}
.fi{
width: 25%;
}
.s{
width: 25%;
}
.t a{
color: #2299DD;
}</style>
</head>
<body>
<ul class="list_area">
<li class="list_item">
<span class="list_item_td o">
<input type="checkbox"/>
</span>
<span class="list_item_td t"><a>停用</a>|<a>维修</a></span>
<span class="list_item_td th">bz0001</span>
<span class="list_item_td f">ght</span>
<span class="list_item_td fi">187****1065</span>
<span class="list_item_td s">1234567890123456</span>
</li>
</ul>
</body>
</html>那个嵌套的直接可以一个新页面，下面一个iframe标签，在引用这个测试页面，就能发现问题所在了，人多力量大
现在我自己也从新建了一个页面，iframe标签引用这个页面，确实又是正常的，但是在项目上，还是不正常，我马上贴出那个span盒子和它内里的checkbox的控制台样式图：
这里是span盒子的样式，它唯一在这个模板里继承的就一个body样式（它没有继承父元素的高）
这是checkbox的控制台样式，它仍然只继承了一个body的模板样式，
这是span盒子的父元素样式图，它也只继承了模板的body样式（但是从这里可以看出，它没有继承到父元素的高，height:45px;）
这是最外层盒子的样式，div和span盒子的高度等样式都是继承它的，它有高度45px，同时，它也只继承了模型的body样式
我直接把每个Body样式注销，让body成默认，仍然无效的，所以说我一开始就说了，这个页面受模板的样式影响非常小，但在这里，它就是存在差异！！！！蛋疼啊。不知道大神们注意到那个list_head的样式没有？在它的子元素div和div的子元素span盒子都是没有引用到它的高height:45px的,我就是不明白，这个属性到底是怎么被丢失了的。从我的控制台样式截图也可以看出来，这个页面就继承了模型的一个body属性，这是毫无影响的，但是它就是丢失了这个类的高度属性
谢邀。是我测试的不对吗？