[解決済み] How to vertically center <div> inside the parent element with CSS? [duplicate]

Question

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

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

私が持っているのは

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

idがUsernameとFormのdivを縦に中央に揃えるにはどうしたらいいですか？置いてみたのですが

vertical-align: middle;

をCSSでid Loginのdivに指定しているのですが、うまくいかないようです。何か手助けがあれば、よろしくお願いします。

解決方法は？

モダンブラウザでの最適な方法は、フレックスボックスを使用することです。

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

ブラウザによってはベンダープレフィックスが必要な場合があります。 フレックスボックスがサポートされていない古いブラウザ（IE 9 以下など）では、ベンダープレフィックスを使用してフォールバック ソリューションを実装する必要があります。 古い方法 .

おすすめの読み物

• ブラウザ対応
• フレックスボックスの手引き
• CSSフレキシブルボックスの使用