使用javascript根据元素高度和父级高度更改元素填充

我需要根据h1的高度及其父级更改h1顶部填充的大小。 填充顶部应为（h1的高度-h1的父级高度）/2

我仍然不明白为什么JavaScript代码不起作用

window.onload=function（）{
常量h1=document.getElementsByTagName（“h1”）[0]；
h1.innerHTML=document.title；
h1.style.paddingTop=（（（h1.parentElement.clientHeight-h1.clientHeight）/2.toString（））；
log（（（h1.parentElement.clientHeight-h1.clientHeight）/2.toString（））；
}

标题{
边框底部：实心1px黑色；
位置：固定；
高度：10vh；
宽度：100%；
}
h1{
边际：0px；
页边顶部：自动；
}

正文

仅仅是因为您没有使用单位来标识计算填充的值。另外，将

display:block

添加到

h1

样式中。查看此演示

window.onload=function（）{
常量h1=document.getElementsByTagName（“h1”）[0]；
h1.innerHTML=document.title；
h1.style.paddingTop=（（h1.parentElement.clientHeight-h1.clientHeight）/2.toString（））+'vh'；//使用单位。
log（（（h1.parentElement.clientHeight-h1.clientHeight）/2.toString（））；
}

标题{
边框底部：实心1px黑色；
位置：固定；
高度：10vh；
宽度：100%；
}
h1{
边际：0px；
页边顶部：自动；
显示：块；
}

正文

首先，你必须确保你的元素显示为一个块，它有宽度和高度。谷歌会自动将h1设置为display:block。我没有改变这一点，它仍然不起作用。虽然我会再看一遍，但谷歌还是添加了

display:block自动切换到h1s。即使我自己添加它也不起作用。感谢添加了一个
vh
修复了它。如果您检查了jsbin演示，您会发现h1在将单元连接到已评估的填充后移动到标题下。这是这里的要点，不管评估等式中有任何错误。