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">
   </form>
   </div>
</div>

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

    (HTML/CSS) How do I repeat items like on Google or Reddit?

    How to pinch the middle of a line in css

    How to make a menu centered using CSS

    How to set background texture to 50% of the page in css

    How can I compress / gzip my mimified .js and .css files before publishing to AWS S3?

    How to find an element using Watir by inline css styles

    How do I get my HTML page to display in the browser without horizontal and vertical scroll bars?

    How to display two columns of blocks with CSS

    Using CSS, how do I change the font color of parent
  • tag if child
  • tag is hovered over
  • How to style the tick mark checkbox using css without using images?

    How to add css on elements created through ajax (jquery)?

    How to make a navbar stay in one line?

    How to write regular expressions in CSS

    With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

    How to align brand title and links left in Bootstrap navbar?

    How to position a background image like wanderfly.com?

    How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

    How to get better at CSS, laying out designs and UI Programming? [closed]

    How to change css for span in span?

    How can I add a footer to my website similar to the header?

    How to match all col height to row height in Bootstrap 3?

    How can I add a pulse animation to a div in an array of divs, in Javascript?

    How to get different style in nested element depending to depth level?

    How to position 3 images on top of one another and retain responsiveness using just CSS?

    CSS HTML How to align image within div to bottom right

    How to modify your CSS working with Mobile Angular UI and Bootstrap

    How to set both a background colour and a different text color on the same element

    How to change the navbar position? CSS & HTML

    How to add hover text on D3 disign?

    How to make my twitter bootstrap overlap all other elements?