使用vertical-align垂直居中div中的按钮(Using vertical-align to vertically center a button within a div)

 目标是将div中的按钮水平和垂直居中。 水平已经处理，但垂直对齐有问题。 
 
 从vertical-align的w3schools页面可以看出，使用middle有以下结果： 
 
 
 
 “该元素位于父元素的中间” 
 
 
 在我的问题中（ 参见这里的jsFiddle ）我已经将父元素中的一个按钮的CSS（据我所知）设置为垂直对齐。 
 
 HTML： 
 
<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST'>
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>
 
 CSS： 
 
* {
font-family:'Arial', Arial, sans-serif;
padding: 0;
margin: 0;
}

h1 {
    padding: 2.1vh 0;
    font-size: 6vmin;
}

div#titleSection {
    width: 100%;
    height: 12vh;
    border: 2.5px solid #ff0fff;
}

div.title-inner {
    height: 100%;
    text-align: center;
    display:inline-block;
}

div.quarter-width { width: 25%; }
div.third-width { width: 33.3%; }
div.half-width { width: 50%; }

div.left {
    float: left;
    background-color: rgba(255, 0, 0, 0.5);
}

div.center {
    float: center;
    background-color: rgba(0, 255, 0, 0.5);
}

div.right {
    float:right;
    background-color: rgba(0, 0, 255, 0.5);
}

.title-inner button {
    vertical-align: middle;
}
 
 我认为父元素是title-inner div我错了吗？ 
 
 我也尝试将CS​​S设置为： 
 
.title-inner form { vertical-align: middle; }
 
 无济于事。 
 
 回顾一下：jsFiddle中显示的所有额外的CSS和html只是为了给出我想要做的事情的最准确的想法 - 如果这是不必要的道歉，但我宁愿留下来以避免忘记我在哪里。 最终目标只是（垂直）将右侧（蓝色）div中的“ 注销”按钮居中。 

Goal is to center a button within a div, both horizontally and vertically. Horizontal has been dealt with, but having trouble with vertical align.
 
From the w3schools page on vertical-align it states that using middle has the following result:
 
 
 
"The element is placed in the middle of the parent element"
 
 
In my problem (see jsFiddle here) I have set the CSS of a button within the parent element (to the best of my knowledge) to be vertically aligned.
 
HTML:
 
<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST'>
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>
 
CSS:
 
* {
font-family:'Arial', Arial, sans-serif;
padding: 0;
margin: 0;
}

h1 {
    padding: 2.1vh 0;
    font-size: 6vmin;
}

div#titleSection {
    width: 100%;
    height: 12vh;
    border: 2.5px solid #ff0fff;
}

div.title-inner {
    height: 100%;
    text-align: center;
    display:inline-block;
}

div.quarter-width { width: 25%; }
div.third-width { width: 33.3%; }
div.half-width { width: 50%; }

div.left {
    float: left;
    background-color: rgba(255, 0, 0, 0.5);
}

div.center {
    float: center;
    background-color: rgba(0, 255, 0, 0.5);
}

div.right {
    float:right;
    background-color: rgba(0, 0, 255, 0.5);
}

.title-inner button {
    vertical-align: middle;
}
 
Am I wrong to think that the parent element is the title-inner div?
 
I have also tried setting the CSS to:
 
.title-inner form { vertical-align: middle; }
 
to no avail.
 
To recap: All extra CSS and html shown in jsFiddle just to give most accurate idea of what I am trying to do - apologies if this is unnecessary but I'd rather leave it in to avoid losing track of where I am. End goal is simply to (vertically) center the Log Out button within the right-hand (blue) div.

原文：https://stackoverflow.com/questions/33631177