What Makes the Text on a <Button> Element Vertically Centered

What makes the text on a button element vertically centered?

I know this is a couple of years old, but I'll add my thoughts after some investigation in to issue while writing a reset stylesheet for a project.

NOTE** This is based on looking through the Firefox source because it was the easiest to obtain and read through. However, based on similar behaviour in other browsers the implementation is probably similar.

Firstly, the main issue here is that <button> elements - atleast in Firefox - are built with an internal element between the <button> tag and it's children. In Firefox it's called moz-button-content and isn't something that can be reached with CSS and has been set to display block without inheriting the height of the button, you can see this style declaration in the useragent stylesheet:

From "source/layout/style/res/forms.css"

*|*::-moz-button-content {
    display: block;
    /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
       ::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */
    /* Multicol container */
    -moz-column-count: inherit;
    -moz-column-width: inherit;
    -moz-column-gap: inherit;
    -moz-column-rule: inherit;
    -moz-column-fill: inherit;
    /* Flex container */
    flex-direction: inherit;
    flex-wrap: inherit;
    /* -webkit-box container (aliased from -webkit versions to -moz versions) */
    -moz-box-orient: inherit;
    -moz-box-direction: inherit;
    -moz-box-pack: inherit;
    -moz-box-align: inherit;
    /* Grid container */
    grid-auto-columns: inherit;
    grid-auto-rows: inherit;
    grid-auto-flow: inherit;
    grid-column-gap: inherit;
    grid-row-gap: inherit;
    grid-template-areas: inherit;
    grid-template-columns: inherit;
    grid-template-rows: inherit;
    /* CSS Align */
    align-content: inherit;
    align-items: inherit;
    justify-content: inherit;
    justify-items: inherit;
}

Because you can't affect any of the styles on this element, you are forced to add you styling on the <button> tags. This leads into the second issue - The browser is hard coded to vertically position the content of the button.

From "source/layout/forms/nsHTMLButtonControlFrame.cpp"

// Center child in the block-direction in the button
// (technically, inside of the button's focus-padding area)
nscoord extraSpace =
    buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);

childPos.B(wm) = std::max(0, extraSpace / 2);

// Adjust childPos.B() to be in terms of the button's frame-rect:
childPos.B(wm) += clbp.BStart(wm);

nsSize containerSize = (buttonContentBox + clbp.Size(wm)).GetPhysicalSize(wm);

// Place the child
FinishReflowChild(aFirstKid, aPresContext, contentsDesiredSize,
                  &contentsReflowInput, wm, childPos, containerSize,
                  ReflowChildFlags::Default);

Given these two issues you can start to see how the button force the content to be centered, consider:

   <button> tag

+------------------------+ ^
| button extra space     | |
|                        | |
+------------------------+ |
|| ::moz-button-content || | button height
||   display: block;    || |
+------------------------+ |
|                        | |
| button extra space     | |
+------------------------+ v

If you give the button a height - like the 48px from your fiddle, the text will be centered because the moz-button-content element is display block and will only have the height of the content (most likely the line-height of the content by default) and when put next to another element you get this behaviour:

* {  box-sizing: border-box;  margin: 0;  border: 0;  padding: 0;  font-family: san-serif;  background: none;  font-size: 1em;  line-height:1;  vertical-align: baseline; }
button, a {  height: 3em;}
button {  background: red;}
a {  display:inline-block;  background: green; }

<button>Button content</button><a>Link Content</a>

.content {  width: 900px;  margin: 0 auto;  text-align: center;  margin-bottom: 10px;}.content .btn {  width: 120px;  height: 40px;  color: white;}
.content .btn2 {  width: 120px;  height: 40px;  line-height: 36px;  color: white;}
.content a.btn {  display: inline-block;  width: 120px;  height: 36px;  line-height: 36px;  border: 2px outset;  color: white;}
.content .btn-teacher {  background-color: rgb(120, 144, 156);}.content .btn-student {  background-color: rgb(255, 112, 67);}

<body>  <div class="content">    <button class="btn btn-teacher">I am a teacher</button>    <button class="btn btn-student">I am a student</button>  </div>
  <div class="content">    <button class="btn2 btn-teacher">I am a teacher</button>    <button class="btn2 btn-student">I am a student</button>  </div>
  <div class="content">    <a class="btn btn-teacher">I am a teacher</a>    <a class="btn btn-student">I am a student</a>  </div></body>

html, body {  height: 100%;}
.table {  display: table;  width: 100%;  height: 100%;}  .cell {  display: table-cell;  vertical-align: middle;}
h3 {  display: inline-block;}
.btn {  margin-top: 15px;}

<script src="http://code.jquery.com/jquery.min.js"></script><script src="http://getbootstrap.com/dist/js/bootstrap.js"></script><link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<div class="container table">  <div class="page-header cell">    <h3>HEADING</h3>    <button class="btn btn-danger pull-right">Button</button>  </div></div>

void LayoutButton::updateAnonymousChildStyle(const LayoutObject& child,
                                             ComputedStyle& childStyle) const {
  ASSERT(!m_inner || &child == m_inner);

  childStyle.setFlexGrow(1.0f);
  // min-width: 0; is needed for correct shrinking.
  childStyle.setMinWidth(Length(0, Fixed));
  // Use margin:auto instead of align-items:center to get safe centering, i.e.
  // when the content overflows, treat it the same as align-items: flex-start.
  childStyle.setMarginTop(Length());
  childStyle.setMarginBottom(Length());
  childStyle.setFlexDirection(style()->flexDirection());
  childStyle.setJustifyContent(style()->justifyContent());
  childStyle.setFlexWrap(style()->flexWrap());
  // TODO (lajava): An anonymous box must not be used to resolve children's auto
  // values.
  childStyle.setAlignItems(style()->alignItems());
  childStyle.setAlignContent(style()->alignContent());
}

div span {
  display: flex;
  text-align: center; 
  min-width: 0px;
  flex-grow: 1;
  justify-content: center;
  cursor: default;
  margin: 0 auto;
  height: 100%;
  align-items: center;
  align-content: center;
}

div,button {  width: 4em;  height: 4em;  background-color: red;  padding: 0;  border: 0;  margin: 1em;  font-size: 1em;  font-family: Arial;  float: left;}div span {  display: flex;  text-align: center;  min-width: 0px;  flex-grow: 1;  justify-content: center;  cursor: default;  margin: 0 auto;  width: 100%;  height: 100%;  align-items: center;  align-content: center;}

<div><span>text text</span></div><button>text text</button>
<div><span>text text text text</span></div><button>text text text text</button>
<div><span>text text text text text text</span></div><button>text text text text text text</button>