How to vertically center divs?

Tags: css,alignment

Problem :

I'm trying to make a small username and password input box.

I would like to ask, how do you vertically align a div?

What I have is:

<div id="Login" class="BlackStrip floatright">
   <div id="Username" class="floatleft">Username<br>Password</div>
   <div id="Form" class="floatleft">
   <form action="" method="post">
      <input type="text" border="0"><br>
      <input type="password" border="0">

How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:

vertical-align: middle;

in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.

Solution :

The best approach in modern browsers is to use flexbox:

#Login {
    display: flex;
    align-items: center;

Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.

Recommended Reading

    CSS Howto..

    How can I use JQuery to replace CSS background image and maintain gradient?

    How to give different style, color to dotted border of links?

    How can i get rid of the open space between the topside of my website and my navigation bar (bootstrap)

    How do I apply CSS rules from a local domain to content in an iFrame from another domain

    How to do transparent background on few div to see background of parent

    How to make css two borders?

    How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

    How center an absolute element (img) that's wider than its parent div?

    Using CSS to style a Sencha Touch form - how do I find the elements?

    How to add css to my page via Git Hub raw?

    How to get rid of this whitespace in internet explorer?

    How to keep image position despite window/device size?

    How to set CSS rule for a DIV in a LI of class UL?

    How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]

    how do I customize header color in jquery mobile?

    How to change the arrow color of ' select' in a form with CSS [duplicate]

    How to select a child element inside a div using CSS

    jQuery - how to “reset” a .css() rotated icon?

    How to use printer friendly function with CTRL+p?

    How to emulate table cells with CSS (without float)?

    How can I add my own CSS styles to CKEditor

    How to change size of SVG circle

    How to refer to a CSS style using ASP.NET MVC?

    How do I get only two form fields to show instead of all 5 on initial page load? CSS

    CSS: How to get an animated gif background-image on top of a div

    How to I make the width of my CSS wrapper relative to the size of the monitor?

    How to avoid CSS interference in an HTML page

    how to fix closure compiler error on css({ float: 'left' }) [duplicate]

    How can I set different gradients as background, each time user refreshes?

    CSS how to translate an image up, and have the div adjust to the new size?