不能在一个 div 中垂直居中多个 div，并在其中垂直居中其元素答案

【问题标题】：Cannot vertically center multiple divs within a div, and vertically center their elements within them不能在一个 div 中垂直居中多个 div，并在其中垂直居中其元素
【发布时间】：2023-03-17 16:05:02
【问题描述】：

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

当然，我已经进行了很多搜索以试图解决此问题，但任何修复似乎要么无济于事，要么更加混乱。任何帮助将不胜感激。

【问题讨论】：

你看过这个网站吗：howtocenterincss.com 非常适合在 CSS 中居中
您忘记为其他元素添加position 属性，并且这些属性top: 0; left: 0; bottom: 0; right: 0; 和属性id 应该是唯一的，但您将其应用于多个元素。

标签： html css divider

【解决方案1】：

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

这里对 flexbox 进行了很好的介绍： http://flexboxin5.com/

【讨论】：

【解决方案2】：

与水平居中相比，垂直居中有点困难。

为此，我在您的 Subdivs 元素上设置了一个容器，并设置了一个 ID SubDivContainer。然后为该容器设置样式，使其垂直居中。

#SubDivContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

放在一起：

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

#SubDivContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

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

.Text
{
  width: 40%;
}

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stylesheet.css">
	</head>
	<body>
		<div id="MainDiv">
          <div id="SubDivContainer">
            <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>
      </div>
	</body>
</html>

【讨论】：

【解决方案3】：

这是一种方法。我在 1 个 div 容器中包装了 2 个内部 div 并将其居中。内部 div 内的所有元素都与 line height 属性设置为 div 的高度对齐，我删除了 BR 元素。

body, html{height: 100%}
.mainDiv 
{
    width: 60%;
    height: 30%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;
    border:  1px solid black;
}
.mainDiv>div{
    height: 90px;
    width: 90%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.mainDiv>div>div{
    width: 100%;
    height: 50%;
    border:  1px solid black;
	line-height: 45px;
}

.mainDiv input[type=text]{
    width: 40%;
}

<html>
  <body>
    <div id="MainDiv" class="mainDiv">
      <div>
        <div>
          <form method="POST">
            <input type="text" name="example1">
            <input type="text" name="example2">
            <input type="submit" value="Go">
          </form>
        </div>

        <div>
          <input type="button" value="Button 1"/>
          <input type="button" value="Button 2"/>
        </div>
      </div>
    </div>
  </body>
</html>

【讨论】：