creating separate rules for horizontal and vertical alignment in css - css

Question

The plunkr link is https://plnkr.co/edit/mv3lL1vwu2LxoeFZw0TX
I want to position a div at the center of a page (vertically and horizontally). The div has a button which should be at the center of the div. I found a solution in Vertically center in viewport using CSS but it doesn't work for me. Also, I want to create two separate rules, one for vertical alignment and one for horizontal alignment and use them together (or separately) so that I can pick which element should be aligned in which way.
I do not want to use Flex, Bootstrap etc. as I am trying to understand CSS concepts.
the horizontal alignment rule is straightforward.
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
The vertical alignment rule is (modified from the SO link)
.centre-vertical-common-styles {
position: fixed;
right: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(50%);
}
.debug-border-common-styles {
border: 3px solid black;
height:40px;
width:200px;
}
HTML
<div class="debug-border-common-styles centre-vertical-common-styles center-horizontally-common-styles">
<button type="button"> Click Me! </button>
</div>
My understanding is that right: 50%; top: 50%; will use the browser's window (viewport?) as the reference and move the div's top edge and right edge to the location which is 50% mark of the browser's respective edge's location. TranslateY and TranslateX should now move the div upwards (-50%) and towards left(50%) respectively to align the button's center to the middle of the page thus centering the button. The issues I am facing are:
1) The translateY doesn't seem to work. If I change the height of the div to say 200px. the div starts growing downwards (i.e. its top edge seem to be fixed!) It doesn't happen if the width is changed to say 200px.
.debug-border-common-styles {
border: 3px solid black;
height:200px;
width:200px;
}
2) The button inside the div is not at the center of the div. I created the following css rule for the button but translateY doesn't seem to work on this one as well.
.centre-button-vertical-common-styles {
position: absolute; /*use absolute so that the origin is no the parent div*/
right: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(50%);
}
3) Ideally, I would like to create two separate rules, say .center-vertical and .center-horizontal and combine them to use the desired effect. But If I do something like follows, it doesn't work. Is it possible to create two separate rules?
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
Not use right here because horizontal rule should place the item in middle
.centre-button-vertical-common-styles {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

Answer 1

Bro, you need few arrows of style. Do like this:)
.centre-vertical-common-styles {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.debug-border-common-styles {
border: 3px solid black;
height:40px;
width:200px;
display:flex;
align-items:center;
justify-content:center;
}