vertically centering a input element using padding - html

Question

hey guys a few days back , i was having a small difficulty centering a input element , and somebody proposed the following solution(FIDDLE HERE)
The CSS is pritty straightforward and standard CSS , have a look ::
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;
}
now this totally acheives what i want to achieve , but the same guy , proposed another unusual solution , using padding , i really liked the padding solution as it was less hassle , but i could't quite understand or grasp what was happening , here is the solution with 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;
}
FIDDLE HERE
Notice how padding-top:30% is doing the trick. I would really like to understand how this is working , can somebody give me the basic idea ? this is a much more cleaner and elegant solution i feel . When i asked the same guy how exactly the solution works , he said the following :
As I said, top padding uses the parent's width as a basis. Depending
on aspect ratio, it must be lager or smaller than half the parent
height .
but once again i could't quite understand. can somebody simplify this .
Thank you.
Alex-Z.

Answer 1

The native size of the image is 1200 x 700 pixels. It is resized to fit the window width. For example, suppose that the window is 1000 pixels wide. In that case the height of the image will be 700 x 1000 / 1200, or 583 pixels. In all cases, the ratio of height to width will be 0.583, or, roughly, 60%.
The rule padding:top: 30% tells the browser to add top padding equal to 30% of the container's width. (Padding properties are unusual in that the percentage is always taken as a percentage of width, even though, as in the case of padding-top, it may effect the vertical position and sizing.)
30% is half of (roughly) 60%. Voila!

Answer 2

It is just two variations of the same solution. Absolute position an element and push it a percentage down the page. The cleaner, second one uses a % that removes the need to offset. The original pushed further than needed then pull back a little.
Another approach is to use transform: translateY(-50%); although a little restrictive on the cross browser side of things. There are loads of ways to achieve things in CSS. Some more 'valid' than others.
http://davidwalsh.name/css-vertical-center

Answer 3

Browsers use parents width when calculating percentage for margin values. It seems a bit confusing.
But I think that it is logically correct, because margins are assumed to be used to separate one element from others, and you mostly want this separations to be equal on all sides.
For alignment you can set you elements top, left, bottom, right properties and they should be of position: absolute;.
This properties use non position: static; parents height and width accordingly when used with percentages
In your situation you can use top: 50%; for .location-search-container and assing negative margin-top:-17px; to compensate elements origin to center. Or alternatively set transform: translateY(-50%). This way you don't need to know size of your elements in pixels, and if you are not supporting older browsers.
Here is the [FIDLE][1] example that centers your element veritcally and horizontally. You can change transform property to margin, but you should set half of your elements width and height in pixels