Question

我有

<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的中心（水平和垂直），它们的高度是可变的吗？

Answer 1

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

JSFIDDLE

Answer 2

这可以使用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;
}

话虽如此，如果你将div中的div2和div3元素包装起来，然后尝试对齐那个包装div，它会更容易。

Answer 3

这是一个很难回答的问题，因为在所有现实中我们都不知道你的宽度是什么，甚至接近看起来就像你在两个内部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。

在容器的中心创建两个连续的<div> </div>

3 个答案:

CSS