How to get float:right button to vertically align in the middle

The cleanest way to do that is to use flex like this:

1. Add display: flex to your outer div panel-footer [Check code below]

2. Remove the float and use text-align:right on the span for the button. [Check code below]

3. Add align-self: center to the inner span. [Check code below]

For 1:

.panel-footer {
    height: 70px;
    border: solid;
    display:flex;
}

For 2:

.header-footer-item {
        text-align: right;
}

For 3:

.header-footer-item {
    align-self: center;
}

jsFiddle: https://jsfiddle.net/d1vrqkn9/4/

Here's a version with proper HTML, and just enough CSS.

.panel-footer {
    height: 70px;
    border: solid;
    position: relative;
}
.panel-footer button {
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translate(0,-50%);
}

    <div class="panel-footer"> 
            <button>Save</button>
    </div>