Q: Vertical align a button in an absolute positioned div 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">
        <a href="" class="btn">button</a>
    </div>
    <div id="example2" class="box">
        <a href="" class="btn">button</a>
    </div>
</div>

The online version is available at http://jsfiddle.net/79hqgabq/2/

A: 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. 
