如何垂直居中 <div>在带有 CSS 的父元素中? [英] How to vertically center <div> inside the parent element with CSS?

问题描述

我正在尝试制作一个小的用户名和密码输入框.

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

我拥有的是:

<div id="用户名" class="floatleft">用户名<br>密码</div><div id="Form" class="floatleft"><form action="" method="post"><input type="text" border="0"><br><input type="password" border="0"></表单>

如何使带有 id Username 和 Form 的 div 与中心垂直对齐?我试过:

vertical-align: middle;

在 id 为 Login 的 div 的 CSS 中，但它似乎不起作用.任何帮助将不胜感激.

解决方案

现代浏览器中最好的方法是使用 flexbox:

#Login {显示:弹性；对齐项目:居中；}

某些浏览器需要供应商前缀.对于不支持 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>在带有 CSS 的父元素中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！