大家好几天前，我在将输入元素居中时有一个小困难 ，有人提出了以下解决方案（ FIDDLE HERE ）
CSS非常简单明了，是标准CSS，请看::
header {
position: relative;
}
header img {
display: block;
max-width: 100%;
}
.location-search-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.input-group {
margin-top: -17px;
top: 50%;
position: absolute;
}
现在这完全实现了我想实现的目标，但是同一个人提出了另一种不寻常的解决方案，使用padding，我非常喜欢这种padding解决方案，因为它麻烦少了，但是我无法完全理解或掌握正在发生的事情，这是用padding解决方案::
header {
position: relative;
}
header img {
display: block;
max-width: 100%;
}
.location-search-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 30%;
}
.input-group {
margin-top: -17px;
}
注意padding-top:30%是如何做到的。 我真的很想了解这是如何工作的，有人可以给我基本的想法吗？ 我觉得这是一个更干净，更优雅的解决方案。 当我问同一个人该解决方案的工作原理如何时，他说：
就像我说的，顶部填充使用父级的宽度作为基础。 根据长宽比，它必须大于或小于父高的一半。
但是我又不太明白。 有人能简化一下吗？
谢谢。
亚历克斯-Z