There are a number of simple ways to achieve vertical centring, but a simple 'click the button' will never work as how it can be achieved will depend on the content.
Even on the printed page centring correctly by a simple click is not possible, and printing has been around for over 500 years.
Look at the css3 'flex-box' module, 'Grids' layout module, 'multi-column' module, 'regions' module, 'exclusions' module, to name just a few. Of course they all require you to know the css.
as to why this is this case is presumably because as the width of an element shrinks, margins-top and position-top and height are contingent on that allowed width. But margin-top and margin-bottom by default are set to auto. This may make it seem like vertical alignments should occur naturally, but it does not. This is because behind the scenes auto is converted to 0. Meaning that Height auto is automatically set to 100% of its containers height leaving no room for margin-top or margin-bottom. Vertical formatting of block level normal flow elements, relies on a calculation much like horizontal formatting. margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom must equal its parenting elements height. However if you use absolutely positioned elements, then if all three of 'top', 'height', and 'bottom' are not auto: If both 'margin-top' and 'margin-bottom' are 'auto', solve for top+ margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom +bottom must equal its parenting elements height. Therefore, margin-top and margin-bottom will be equal values thus vertically centering the element.