使用垂直对齐将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> 

Answer 2

I usually use JS to vertically center, it seems less complicated to me than CSS workarounds. I've updated your fiddle with my method: https://jsfiddle.net/bhcoLg9h/3/

HTML:

<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST' id="button1">
        <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>

JS:

$(document).ready(function() {
    var OuterHeight = $('#titleSection').height();
    var InnerHeight = $('#button1').height();
    var TopMargin = (OuterHeight-InnerHeight)/2;
    $('#button1').css('margin-top', TopMargin);   
});

Answer 3

You should set display:table for parent div

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

And set

    display: table-cell;
    vertical-align: middle;

for .title-inner form

Answer 4

Credit to @andy-furniss for reaching the answer to the vertical alignment problem by editing the CSS of the child element as follows:

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

However the element no longer remained horizontally centered with this method. After some playing around with this method I realised that the left edge of the button is the point being used for horizontal central alignment. By adding a transformation in the x-direction, the element was shifted to the correct position:

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

See snippet below:

 * { 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%; 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>