Question

我需要帮助在固定的宽度/高度div中垂直居中两个div，其中两个div在父div的中间缩放。第一个子div具有最大高度，因此它可以动态扩展到一定程度。我怎样才能使它们居中，使蓝绿色和绿色的div在垂直的蓝色中间？

JSFiddle HERE： https://jsfiddle.net/850sdmhj/

.subtext-container {
  position: absolute;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
}
.color-teal {
  max-height: 40px;
  overflow: hidden;
  background-color: teal;
}
.color-green {
  max-height: 13px;
  font-size: 9px;
  background-color: green;
}

<div class="subtext-container">
  <div class="color-teal">teal</div>
  <div class="color-green">green</div>
</div>

Answer 1

尝试使用display:flex属性使其正常工作。

更新了CSS：

.subtext-container {
  position: absolute;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.color-teal {
  max-height: 40px;
  overflow: hidden;
  background-color: teal;
}

.color-green {
  height: 13px;
  font-size: 9px;
  background-color: green;
}

示例小提琴：Demo

注意：请检查浏览器支持。

浏览器支持： http://caniuse.com/#feat=flexbox

Answer 2

对subtext-container

使用以下CSS

.subtext-container {
  position: relative;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
  display:table-cell;
  vertical-align:middle;
}

更新了小提琴https://jsfiddle.net/850sdmhj/1/

Answer 3

也许，通过使用像

这样的包装器

。颜色缠绕{ 位置：相对;顶部：50％; 变换：平移Y（-50％） }

.subtext-container {
  position: absolute;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
}

.color-teal {
  max-height: 40px;
  overflow: hidden;
  background-color: teal;
}

.color-green {
  height: 13px;
  font-size: 9px;
  background-color: green;
}

.color-wrap{
	position:relative; top:50%;
	-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)
}

<div class="subtext-container">
  <div class="color-wrap">
    <div class="color-teal">teal</div>
    <div class="color-green">green</div>
  </div>
</div>

Answer 4

我会把.color-teal和.color-green放在另一次潜水中，用＃34; .vertical-align＆＃34;类。

<div class="subtext-container">
  <div class="vertical-align">
    <div class="color-teal">teal</div>
    <div class="color-green">green</div>
  </div>
</div>

然后在CSS文件中：

.vertical-align{ /* This will do the trick to center content vertically */
  display: table-cell;
  vertical-align: middle;
}

.subtext-container {
  display: table; /* Add Display Table to the container */
}

仅当容器（带有display：table的容器）具有固定高度时才会起作用。

您的工作示例：https://jsfiddle.net/rx79sb6m/

另外，您可以阅读this post，您可以在其中找到另外5种方法来实现相同的结果。

垂直居中两个div

4 个答案: