水平垂直居中两个div（CSS）

Question

这可能并不太难，但出于某种原因 - 我尝试了几种不同的解决方案 - 我在正确地居中两个不同的div元素（头部和文本字段）时遇到了一些问题。我希望这两个元素水平和垂直都居中于一个外围的div元素中。头部应该在文本字段上方。

外围的div元素具有固定的比例，但头部的长度会有所变化，可以占用一行或多行。

我该如何实现这个效果？

HTML代码:

<div id="square">
    <div id="header">
        <h3>header</h3>
    </div>
    <div id="textfield">
        <input id="textfield" type="text">
    </div>
</div>

在 CSS 中，我尝试了各种组合，如 text-align: center、vertical-align: middle、left/right/top/bottom: 0 + margin: auto 等，但迄今为止，我只能水平居中 div 元素。在我的一些解决方案中，我甚至尝试在外部和内部元素之间添加第四个 div 元素。

- Candleout

Answer 1

你可以使用 display:flex 来实现这个功能：

#square {
  display: flex;
  align-items: center; /*horizontal centering*/
  justify-content: center; /*vertical centering*/
  flex-direction: column; /*keep the h3 above the textbox*/

  /* these are for demo only*/
  width: 400px;
  height: 400px;
  border:1px solid red;
}

h3 {
  margin-top:0; /* removing margin otherwise you'll get someone commenting the h3 isn't vertically centered*/
  
}

<div id="square">
    <div id="header">
        <h3>header</h3>
    </div>
    <div id="textfield">
        <input id="textfield" type="text">
    </div>
</div>

- Pete

---

谢谢！我也会尝试这个解决方案。 - Candleout

我登录后投票支持这个答案。很多答案对我来说都不起作用或者不完整。谢谢。 - Nora

Answer 2

这个有效吗？

#square {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
}

<div id="square">
  <div id="header">
    <h3>header</h3>
  </div>
  <div id="textfield">
    <input id="textfield" type="text">
  </div>
</div>

- Praveen Kumar Purushothaman

---

@Candleout，我应该指出这将使正方形 div 在窗口中居中，而不是 div 中的内容。 - Pete

@Candleout 别忘了给包含的 div 元素添加 position: relative。 - Praveen Kumar Purushothaman