Vertically center a textbox in a right-aligned div - html

Question

One of the solutions I learned is to set the display of the parent div element to table-cell and use the vertical-align property.
While this works, in my case I also need the parent div to float right, but it breaks the table-cell trick and the whole thing does not work now.
So my question is simple: Why exactly is this happening, and more importantly, how can I achieve the effect I want?
div {
/* float: right; uncomment this will make this not working */
display: table-cell;
vertical-align: middle;
height: 60px;
border: 1px solid red;
}
<div>
<input>
</div>
Corresponding JSFiddle

Answer 1

CSS3 provides flexbox. All you need is this:
body {
display: flex; /* create flex container */
justify-content: flex-end; /* align child to right edge */
}
div {
display: flex; /* create nested flex container */
align-items: center; /* center child vertically */
height: 60px;
border: 1px solid red;
}
<div>
<input>
</div>
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
To learn more about flexbox visit:
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
Browser support:
Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.

Answer 2

Wrap everything with a div set to float:right.

Answer 3

updated your fiddle with few tweaks. hope this works for you.
Please check http://jsfiddle.net/53ALd/3780/
html :
<div >
<input class="form-control" id="txtWOFastNavigation">
</div>
css :
div {
float: right;
height: 160px;
border: 1px solid #000;
position: relative;
background: red;
width: 104px;
}
div .form-control{
width: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}