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

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>