Question

几天前嘿家伙，我有一个small difficulty centering a input element，有人提出了以下解决方案（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;
}

现在这完全实现了我想要实现的目标，但同样的人，提出了另一个不寻常的解决方案，使用填充，我真的很喜欢填充解决方案，因为它不那么麻烦，但我不能理解或掌握什么正在发生，这是填充::

的解决方案

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

FIDDLE HERE

注意padding-top:30%如何做到这一点。我真的想了解这是如何工作的，有人可以给我一个基本的想法吗？这是一种更清洁，更优雅的解决方案。当我向同一个人询问解决方案的确切运作方式时，他说了以下内容：

正如我所说，顶部填充使用父宽度作为基础。根据在宽高比上，它必须大于或小于父母的一半身高。

但我再也不能理解了。有人可以简化这个。

谢谢。

亚历-Z。

Answer 1

图像的原始尺寸为1200 x 700像素。它的大小适合窗口宽度。例如，假设窗口宽度为1000像素。在这种情况下，图像的高度将是700 x 1000/1200或583像素。在所有情况下，高度与宽度的比率将为0.583，或大致为60％。

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

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

Answer 2

这只是同一解决方案的两种变体。绝对定位一个元素并将其向下推到页面的百分比。清洁工，第二个使用％，消除了抵消的需要。原件推得比需要的还要多，然后稍稍拉回来。

另一种方法是使用transform: translateY(-50%);虽然对浏览器方面有一点限制。有很多方法可以在CSS中实现。一些更有效的＆＃39;比其他人。

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，但应设置元素宽度和高度的一半（以像素为单位）

使用填充

3 个答案: