CSS button like vertical align feature - html

Question

Pre History
I am building html form, with elements having multiple options ...., but instead of showing it as dropdown, i would like to show them as buttons without using any js, I removed buttons with label pointing to input checkbox.
Problem
I need label (or anchor or div) tag behave exactly like button tag without any extra wrapper tags, I googled all variation doesn't provide same result as native tag button.
<button class="button">
Text
<div>Small Text</div>
</button>
Solutions not work
line-height, padding does not provide same functionality, because button height/width and text length may vary. I tried special webkit style -webkit-appearance: button; no changes.
Mustery Flex
I tried flex
.button {
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: inline-flex;
}
<div class="button">
Text
<div>Small Text</div>
</div>
but child div inside button not breaking/warping to new line.
p.s Environment tested, Google Chrome, Safari

Answer 1

I found solution using flex with flex-direction: column; so text and div treats like column items, here is code
label.button {
flex-direction: column;
justify-content: center; /* <-- actual veertical align */
display: inline-flex;
text-align:center;
}
JS Fiddle Demo

Answer 2

Does this does the job ?
div.button {
align-items: center;
text-align: center;
display: inline-block;
border: 1px solid black;
}
div.button div {
clear: both;
}
<div class="button">
Text
<div>Small Text</div>
</div>

Answer 3

Ghost element trick looks work well.
.wrap {
text-align: center;
background: #ededed;
margin: 20px;
}
.wrap:before {
content: '\200B';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered-guy {
display: inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #777 dotted 2px;
background: #666;
color: #fff;
}
<div class="wrap" style="height: 512px;">
<div class="centered-guy">
<h1>Some text</h1>
<p>Bool!<br>Look at me, mama!</p>
</div>
</div>