Html 使用填充将输入元素垂直居中

嘿，几天前，我有一个问题，有人提出了以下解决方案（）

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;
}

现在，这完全实现了我想要实现的目标，但同一个人提出了另一个不寻常的解决方案，使用填充，我非常喜欢填充解决方案，因为它没有那么麻烦，但我不能完全理解或理解正在发生的事情，这是使用填充的解决方案：

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%

是如何做到这一点的。我真的很想了解这是如何工作的，有人能告诉我基本的想法吗？我觉得这是一个更干净、更优雅的解决方案。当我问同一个人这个解决方案到底是如何工作的时，他说：

正如我所说，顶部填充使用父对象的宽度作为基础。依靠 在长宽比上，它必须大于或小于父级的一半 高度

但我还是不能完全理解。有人能简化一下吗

多谢各位

---

Alex-Z.

这只是同一种解决方案的两种变体。绝对定位一个元素，并在页面上向下按一定百分比。第二个清洁器使用%来消除抵消的需要。原来的推得比需要的更远，然后向后拉一点

另一种方法是使用

transform:translateY（-50%）虽然在跨浏览器方面有点限制。在CSS中有很多实现的方法。有些比其他更“有效”

这只是同一种解决方案的两种变体。绝对定位一个元素，并在页面上向下按一定百分比。第二个清洁器使用%来消除抵消的需要。原来的推得比需要的更远，然后向后拉一点

另一种方法是使用
transform:translateY（-50%）虽然在跨浏览器方面有点限制。在CSS中有很多实现的方法。有些比其他更“有效”

图像的本机大小为1200 x 700像素。调整大小以适应窗口宽度。例如，假设窗口的宽度为1000像素。在这种情况下，图像的高度将为700 x 1000/1200或583像素。在所有情况下，高度与宽度的比率都将为0.583，或者大约为60%

规则
padding:top:30%
告诉浏览器添加等于容器宽度30%的顶部填充。（填充属性是不寻常的，因为百分比始终被视为宽度的百分比，即使在
Padding top
的情况下，它可能会影响垂直位置和大小。）

30%是（大约）60%的一半。瞧
 图像的本机大小为1200 x 700像素。调整大小以适应窗口宽度。例如，假设窗口的宽度为1000像素。在这种情况下，图像的高度将为700 x 1000/1200或583像素。在所有情况下，高度与宽度的比率都将为0.583，或者大约为60%

规则
padding:top:30%
告诉浏览器添加等于容器宽度30%的顶部填充。（填充属性是不寻常的，因为百分比始终被视为宽度的百分比，即使在
Padding top
的情况下，它可能会影响垂直位置和大小。）

30%是（大约）60%的一半。瞧
 浏览器在计算边距值的百分比时使用父宽度。这似乎有点令人困惑。

但我认为这在逻辑上是正确的，因为假定边距用于将一个元素与其他元素分开，而您通常希望这种分开在所有方面都是相等的。

对于对齐，您可以设置元素
上、左、下、右
属性，它们应该是
位置：绝对。
此属性使用非
位置：静态与百分比一起使用时，相应的高度和宽度

在您的情况下，您可以使用
top:50%用于
。位置搜索容器
和assing negative
页边距顶部：-17px以补偿从原点到中心的元素。或者设置
transform:translateY（-50%）
。这样，您就不需要知道元素的大小（以像素为单位），也不需要知道是否支持较旧的浏览器

下面是[FIDLE][1]示例，它将元素真正水平居中。您可以将“变换”属性更改为“边距”，但应设置元素宽度和高度的一半（以像素为单位）
浏览器在计算边距值的百分比时使用父宽度。这似乎有点令人困惑。

但我认为这在逻辑上是正确的，因为假定边距用于将一个元素与其他元素分开，而您通常希望这种分开在所有方面都是相等的。

对于对齐，您可以设置元素
上、左、下、右
属性，它们应该是
位置：绝对。
此属性使用非
位置：静态与百分比一起使用时，相应的高度和宽度

在您的情况下，您可以使用
top:50%用于
。位置搜索容器
和assing negative
页边距顶部：-17px以补偿从原点到中心的元素。或者设置
transform:translateY（-50%）
。这样，您就不需要知道元素的大小（以像素为单位），也不需要知道是否支持较旧的浏览器

下面是[FIDLE][1]示例，它将元素真正水平居中。可以将“变换”属性更改为“边距”，但应以像素为单位设置元素宽度和高度的一半