html - 不能在一个 div 中垂直居中多个 div，并在其中垂直居中它们的元素

我对 HTML/CSS 还很陌生，并试图理解其中涉及的很多概念。我正在尝试将 2 个 div 在一个较大的 div 中垂直居中，并将这些 div 中的元素居中。

HTML:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <div id="MainDiv">

      <div id="SubDiv">
        <form method="POST">
            <input type="text" name="example1" class="Text">
            <input type="text" name="example2" class="Text">
            <input type="submit" value="Go"> <br>
        </form> <br/>
      </div>

      <div id="SubDiv">
          <input type="button" value="Button 1"/>
          <input type="button" value="Button 2"/>
      </div>

  </div>
</body>

CSS:

#MainDiv 
{
    width: 60%;
    height: 30%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;
    border:  1px solid black;
}

#SubDiv
{
    width: 90%;
    height: 45;
    margin: auto;
    border:  1px solid black;

}

.Text
{
    width: 40%;
}

You can see the result here: the main div completely centered, but I'm unable to control the vertical centering of anything else.

当然，我已经进行了大量搜索以试图修复此问题，但任何修复似乎都无济于事，或者把事情搞得更糟。如有任何帮助，我们将不胜感激。

最佳答案

为此你可能需要考虑 flexbox，它内置了垂直居中

这里是对 flexbox 的精彩介绍: http://flexboxin5.com/

关于html - 不能在一个 div 中垂直居中多个 div，并在其中垂直居中它们的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29994460/