使两个连续的 <div> 在容器的中心答案

【问题标题】：make thw two consecutive <div> in the center of the container使两个连续的 <div> 在容器的中心
【发布时间】：2014-01-05 05:30:18
【问题描述】：

我有

<div id="container">
     <div id="div2">Title</div>                
     <div id="div3">text text</div>
</div>

在哪里

#container {
    height:500px;
    width:100%;
    text-align: center;
}

#div2, #div3 {
   width: 50%;
}

有没有办法让#div2 和 div3 一起在#container 的中心（水平和垂直），它们的高度是可变的？

【问题讨论】：

您希望 div2 在 div3 之上（即块元素）还是希望它们彼此相邻出现 - 内联？
嗨 Danield，div2 将高于 div3，并且它们的宽度相同。

标签： css html center

【解决方案1】：

这是一个很难回答的问题，因为实际上，一旦您将所需的所有内容放入两个内部 div 中，我们甚至不知道您的宽度会接近多少。不过，我确实为您提供了一些您绝对可以从中受益的解决方案。

注意：以下所有 JsFiddle 示例都已更改为包含颜色，这样您就可以完全理解定位效果。

第一个选项：The Floater

基本上，这个选项非常简单，除了添加三个元素display, vertical-align, and float 之外，我们保持一切不变。这会导致以下 CSS：

#container {
    height:500px;
    width:100%;
    text-align: center;
    background-color:blue;
    display: table-cell;
    vertical-align:middle;
}

#div2, #div3 {
    float:left;
    text-align:center;
    width: 50%;
    background-color:orange;

}

稍后我将进一步详细说明我们使用这三种方法的原因。

第二个选项：Boxception

我相信这可能是您想要的，我添加的只是margin, display, and vertical-align，它会生成以下 CSS 代码：

#container {
    height:500px;
    width:100%;
    text-align: center;
    background-color:blue;
    display: table-cell;
    vertical-align:middle;
}

#div2, #div3 {
    margin: 0 auto;
    text-align:center;
    width: 50%;
    background-color:orange;

}

那么为什么我们要使用时髦的表格单元格显示呢？当与 vertical-align 结合使用时，这是一个简单的技巧，可以将任何内容放置在外部 div 的内部，从而将项目正确定位在它的中心。

第一个示例和第二个示例之间的区别在于，浮动将使内容始终希望停留在 div 的左侧（本质上，并不是真正垂直居中），但有些人喜欢这个方面。

边距是确保您可以水平居中的一个简单技巧。我确实想指出，这个 div 只会随着 div 中的内容的扩展而扩展（即 100% 宽度的含义）。因此，如果您没有任何内容，那么在将内容放入内部 div 之前，最外面的 div 实际上并不存在。所以，如果你的 div 看起来像一条宽度方向的小线和长的高度，不要气馁；为了更好地表达这一点，这里是example。

【讨论】：

非常感谢佛教野兽。我喜欢模仿表格单元格垂直对齐（有点）的第二种方法。
当然 :) 我很高兴它对你很有效 :) 祝你好运！

【解决方案2】：

使用float: left; 和height: 100%;

JSFIDDLE

【讨论】：

【解决方案3】：

这可以通过使用 flexbox 的当前标记来完成。

FIDDLE（在小提琴中为旧浏览器添加了供应商前缀）

CSS

#container {
    height:500px;
    text-align: center;
    background: pink;
    display: flex;
    align-items: center; /* horizontal center */
    flex-direction: column;
    justify-content: center; /*vertical center */
}

#div2, #div3 {
   width: 50%;
    background: orange;
}

话虽如此，如果您将 div2 和 div3 元素包装在一个 div 中，然后尝试对齐该包装 div，这将变得容易得多。

【讨论】：