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

    How do you associate a css/sass stylesheet to a view in rails?

    How Do I Make a “Trickless”, Cross-Platform CSS-Based Same Column Height?

    Angularjs: How to *retrieve* css property from element in directive?

    How to display a background image with a:hover

    how to layout tictactoe with html and css on a webpage

    How to select div with id nested in another div with class in css

    CSS, how to size an img back to its width attribute

    how to locate an element by value using css selector in webdriver?

    How to make responsive popup div?

    How can I create this simple form example in HTML?

    How to add CSS to CKEDITOR?

    How can I apply a font type to everything using css

    How to hide the first two div using css?

    How to override nth-child

    How to toggle a div to slide up and down

    How to create a box when mouse over text in pure CSS?

    How to make this shape with css? [closed]

    How to implement icon fonts like github.com

    how to do 3d menu in css 3 with that effect like on page [closed]

    How to contain text box in parent div

    How does CORS (Access-Control-Allow-Origin header) increase security?

    how to replace url in css using regexp (javascript)

    JQuery: Creating boxed text that shows on top of a div on hover

    How to avoid display block for a particular div element using css

    How can I make a full width videojs v5 progress bar?

    How to automaticly let HTML cut the edges based on the setted height of the image?

    How do I center a Bootstrap div with a 'spanX' class?

    How to place a div at top center position of a page using css…?

    How can I make a visual header in CSS without PHP?

    How to let 3 divs displayed in line, won't wrap if I resize the browser?