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元素。

Answer 1

您可以使用display:flex：

执行此操作

＆＃13;

#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*/
  
}

＆＃13;

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

＆＃13;

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>

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

2 个答案: