Using vertical-align to vertically center a button within a div

Question

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.

Answer 1

The vertical-align property is pretty hard to work with and just a bit painful to be honest. A much more reliable way to center is the method shown here: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

I have implemented this below.

Or use flexbox as Luis said if you can support it.

* {
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;
    position:relative;
    background-color: rgba(0, 0, 255, 0.5);
}

.title-inner button {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

<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>