将两个 div 垂直居中答案

【问题标题】：Center two divs in vertically将两个 div 垂直居中
【发布时间】：2016-09-24 15:54:02
【问题描述】：

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

JSFiddle 这里： 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>

【问题讨论】：

stackoverflow.com/questions/356809/…的可能重复

标签： html css

【解决方案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

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

也许，通过使用像

这样的包装器

.color-wrap{ 位置：相对；最高：50%；变换：translateY(-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>

【讨论】：

【解决方案4】：

我会将 .color-teal 和 .color-green 放在另一个带有“.vertical-align”类的潜水中。

<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 种方法来达到相同的效果。

【讨论】：