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

Question

大家好几天前，我在将输入元素居中时有一个小困难 ，有人提出了以下解决方案（ 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

Answer 1

图像的原始大小为1200 x 700像素。 调整大小以适合窗口宽度。 例如，假设窗口为1000像素宽。 在这种情况下，图像的高度将为700 x 1000/1200或583像素。 在所有情况下，高度与宽度之比将为0.583，或大约60％。

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

30％是（大约）60％的一半。 瞧！

Answer 2

这只是同一解决方案的两个变体。 绝对定位元素，然后将其下推一定百分比。 第二个清洁器使用％来消除胶印的需要。 原稿推得比需要的还远，然后向后拉一点。

另一种方法是使用transform: translateY(-50%); 尽管在跨浏览器方面有些限制。 有很多方法可以实现CSS中的功能。 一些比其他更“有效”。

http://davidwalsh.name/css-vertical-center

Answer 3

浏览器在计算边距值的百分比时使用父级宽度。 似乎有点混乱。

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

为了对齐，您可以将元素的top, left, bottom, right属性设置为position: absolute; 。 此属性使用非position: static; 父母百分比的高度和宽度

在您的情况下，您可以使用top: 50%; 对于.location-search-container并设置负margin-top:-17px; 补偿元素原点到中心。 或者，设置transform: translateY(-50%) 。 这样，您就无需知道元素的大小（以像素为单位），并且无需支持较旧的浏览器。

这是[FIDLE] [1]的示例，该示例将元素垂直和水平居中。 您可以将transform属性更改为margin，但应将元素的一半宽度和高度设置为像素