Vertical align a button in an absolute positioned div - position

Question

Usually I vertically center a button, inside an absolute positioned div with top:50%, and margin-left:-(height/2), but today I realised it's not perfect, or I don't know how to use it correctly.
For example I did 2 examples. In the first example the <a> tag is an inline element, in the second example it's a block element. The positioning with block element is perfect, but unfortunately the width is 100%.
Please explain that why is the second example works well, with display:block;?
I'm really interested in your cross browser solution. How do you do this simple stuff?
Here is my css:
.container {
height:240px;
position:relative;
}
.box {
width:200px;
height:100%;
position:absolute;
left:0;
top:0;
background:yellow;
text-align:center;
padding:20px;
}
#example2 { left: 250px; }
.btn {
display:inline-block;
padding:5px 12px;
line-height:34px;
color:#fff;
background:red;
position:relative;
top:50%;
margin-top:-17px;
}
#example2 .btn { display:block; }
..and html
<div class="container">
<div id="example1" class="box">
button
</div>
<div id="example2" class="box">
button
</div>
</div>
The online version is available at http://jsfiddle.net/79hqgabq/2/

Answer 1

The alignment issue you see is being caused by the margin-top: -17px line as seen by this updated fiddle with that line removed on the .btn class: Updated Demo
On another note, vertical alignment is notoriously problematic with old CSS selectors, and it would be a good idea to transition over to Flexbox unless you needed to support older browsers.
Here's your problem with the new display: flex selector and corresponding sub-selectors: Demo w/ Flexbox. This removes the emphasis on having to pixel fudge to get proper vertical alignment.
New .box class
.box {
width:200px;
height:100%;
position:absolute;
left:0;
top:0;
background:yellow;
text-align:center;
padding:20px;
/* New lines for alignment */
display: flex;
align-items: center;
justify-content: center;
}
New .btn class (just removed the old tags)
.btn {
display:inline-block;
padding:5px 12px;
line-height:34px;
color:#fff;
background:red;
}
EDIT: After researching block elements have the property to expand to 100% of the parent container. This can be explained in more detail here. This is why display:block div expands until it reaches the padding on the .box class.
To answer why the display: inline-block element is slightly misaligned is because by default it is aligned on the baseline. See here for reference. Changing the vertical alignment of the div to be vertical-align: top will fix this.
Here is the new fiddle that uses all your previous syntax just with the added vertical-align: middle property.