在这种情况下如何垂直居中元素（最好没有 javascript）答案

【问题标题】：how to vertically center element in this case (prefer no javascript)在这种情况下如何垂直居中元素（最好没有 javascript）
【发布时间】：2016-03-16 23:11:56
【问题描述】：

两个组件：父（白框）和子（灰框）。我想将孩子垂直放置在父母的中心。

三个约束是：

父级有固定高度，overflow-y 是自动的。
孩子的身高是可变的，身高可能小于或大于父母的身高。
child 是一个普通的组件（div），而不仅仅是一张图片或一段文字。

由于孩子的高度可变，我选择使用“绝对位置+平移”来实现这一点，例如：

.parent {
  position: relative;
  height: 400px;
  width: 300px;
  overflow-y: auto;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: auto;
  transform: translate(-50%, -50%);
}

当孩子的身高低于父母的身高时效果很好。

如果孩子的身高大于父母的身高，就会发生不好的事情（见下图（b））。问题是我无法滚动到孩子的顶部。我想这是导致孩子被裁剪的“翻译-y”。

现场演示在jsfiddle

我该如何克服这个问题？有没有更好的方法来做到这一点？

click here to see image

【问题讨论】：

我找到了一个方法并回答了下面的问题，你可以看到它。

标签： html css

【解决方案1】：

嗯，我找到答案了..

使用 ":after inline-block" 技巧

.parent {
  width: 300px;
  height: 400px;
  text-align: center;
  overflow-y: auto;
  background-color: white;
}

.parent:after {
  display: inline-block;
  content: '';
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.child {
  display: inline-block;
  width: 200px;
  height: auto;
  vertical-align: middle;
  text-align: left;
  background-color: grey;
}

现场演示：jsfiddle

【讨论】：

【解决方案2】：

您可以给孩子一个特定的height，也可以使用overflow: auto;。这将使您的孩子在您的父容器中居中，并且文本只能在孩子本身中看到。

See here

【讨论】：

【解决方案3】：

您的问题是您使用绝对位置，它需要相对位置+左右调整边距。

.child {
 position:relative;
 margin-left:auto;
 margin-right:auto;
 width: 200px;
 height: auto;
 background-color: grey;
}

这是一个有效的Fiddle

您仍然可以添加top: 50%; 等。

希望这会有所帮助！

【讨论】：

对不起，我想你误解了我的问题。我希望孩子可以垂直居中当它的高度小于父母的高度时。无论如何，感谢您的帮助； )
好的，但是它将始终居中，即使高度小于或大于父母的高度，您也可以将 overflow:auto 添加到孩子的滚动功能。尝试改变高度，它适用于所有情况？

【解决方案4】：

你想要这个:)

.parent {
  position: relative;
  width: 300px;
  height: 400px;
  overflow-y: auto;
  background-color: white;
}

.child {
  position: relative;
  top: 0%;
  left: 50%;
  width: 200px;
  height: auto;
  background-color: grey;
  transform: translateX(-50%);
}

<div class="parent">
  <div class="child">
    Et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Id quod mazim, placerat facer possim assum typi non habent claritatem insitam est usus. Dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod
    tincidunt ut laoreet? Gothica quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per seacula quarta decima. Duis dolore te feugait nulla facilisi nam liber tempor cum soluta nobis eleifend. Nulla facilisis at, vero eros et accumsan
    et iusto odio dignissim. Demonstraverunt lectores legere me lius quod ii legunt saepius claritas est. Iriure dolor in hendrerit in vulputate velit esse molestie consequat vel illum dolore eu feugiat? Vel eum iriure dolor in hendrerit in vulputate
    velit esse molestie. Ex ea commodo consequat duis autem consequat vel illum dolore eu feugiat nulla. Augue duis dolore te feugait nulla facilisi nam liber tempor. Lectores legere me lius quod ii legunt saepius claritas. Litterarum formas humanitatis
    per seacula quarta, decima et quinta decima. Eorum claritatem Investigationes demonstraverunt est etiam processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est! Minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat. Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
  </div>
</div>

【讨论】：

对不起，我想你误解了我的问题。我希望孩子可以垂直居中当它的高度小于父母的高度时。无论如何，感谢您的帮助； )

【解决方案5】：

你需要在孩子身上设置一个 line-height。

.child { line-height:  400px; }

【讨论】：