如何垂直中心div？ [英] How to vertically center divs?

问题描述

我想要创建一个小的用户名和密码输入框。

我想问一下，如何垂直对齐div？

我有的是：

 < div id =Loginclass = BlackStrip floatright> 
< div id =用户名class =floatleft>用户名< br>密码< / div> 
< div id =Formclass =floatleft> 
< form action =method =post> 
< input type =textborder =0>< br> 
< input type =passwordborder =0> 
< / form> 
< / div> 
< / div> 
  

如何使用id用户名和窗体的div垂直对齐中心？我试过：

  vertical-align：middle; 
  

在CSS中使用id登录的div，但似乎不工作。

解决方案

现代浏览器的最佳方法是使用flexbox：

  #Login {
 display：flex; 
 align-items：center; 
} 
  

某些浏览器需要供应商前缀。对于没有flexbox支持的旧版浏览器（例如IE 9和更低版本），您需要使用旧方法。

推荐读物

• 浏览器支持


• Flexbox 指南


• 使用CSS弹性框





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.

解决方案

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

• Browser support
• A Guide to Flexbox
• Using CSS Flexible Boxes

这篇关于如何垂直中心div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！