HTML: What css attribute makes content in button "center"? - html

Question

It's a weird and not that important question:
if I create a button tag in html, then type some text like "click me" or something
<button> Click me! </button>
then use css to give it width and height, like:
.myBtn{
width:100px;
height:100px;
}
The words "Click me!" will automatically be right in the center of my button.
I tried text-align:left;, the words will move to the left side,
which means I disable its horizon center
but I don't know how to make it not vertical center ?
put elements vertical center always has some solution to make it(like after/before, flex, margin...etc), but today I wanna make the contents not vertical center in button,
I totally have no idea how to do that execpt changing its top and left.
does any body know what attributes should I change to make it not vertical center?
btw, I just wanna know what basic attributes the button has to make its contents center, not the solution of put the content in button to the left-top, so please don't tell me use top, left, calc or something calculate stuff about changing contents' position, that will be great.

Answer 1

.myBtn{
width:100px;
height: auto;
padding-bottom:82px;
min-height:100px;
}
<button class="myBtn"> Click me! </button>
You can use min-height and padding-bottom

Answer 2

you can did this by adding a <span> tag to your <button> tag .I'm added the snippet below
button{
width:100px;
height:100px;
}
button > span {
display: inline-block;
vertical-align: top;
}
button:after {
content: "";
display: inline-block;
vertical-align: top;
height: 100%;
}
<button>
<span> <!-- Added wrapper -->
Click Me...!
</span>
</button>