button position absolute not working as expected

button, like most form elements, is a replaced element. Replaced elements behave differently from regular non-replaced elements (such as div) when absolutely positioned. The following two points from section 10.3.8 of CSS2.1 apply:

1. The used value of 'width' is determined as for inline replaced elements. If 'margin-left' or 'margin-right' is specified as 'auto' its used value is determined by the rules below.

...

6. If at this point the values are over-constrained, ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

The width of the button is determined not based on the specified offsets, unlike for non-replaced elements, but by the contents of the button itself. Since the used value of width is not auto, and the specified values of left and right are not auto, the values are over-constrained and the browser is forced to ignore right in order to respect width.

If you want the button to fill the entire height and width of the wrapper, don't use absolute positioning. Instead, specify 100% height and width on the button, and use padding on the wrapper to offset the button:

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
    box-sizing: border-box;
}

.wrapper button {
    height: 100%;
    width: 100%;
}

<div class="wrapper">
    <button>Hello world</button>
</div>

(If you can't use box-sizing, subtract the padding from the dimensions of the wrapper.)

The vertical alignment of the text probably has to do with how the browser draws button controls by default, which is usually based on system button controls.

You might want to use inherit/100% value for width and height css properties.

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
}
.wrapper button {
    width: inherit;
    height: inherit;
}

Fiddle

NOTE: If you want to have the dimensions exactly 300 then subtract padding. (which will be 294px)

You can use calc to get the exact width minus the padding you get from the positioning:

width: calc(100% - 6px);

JSFiddle