javascript - 在子类中随着文本的增长垂直居中

Question

我有一个父容器(如弹出窗口)，其中我有一个附加到父容器的子元素。子元素是一个包含一些文本的 div。我想让文本在 div 中居中，以便文本在子 div 中保持居中对齐，但文本在超过 3-4 行时应垂直对齐。我可以在文本增长时垂直对齐文本，但是当它仍然是一个小文本时，它应该垂直居中，但这种情况并没有发生。我在子类中尝试了很多 css 属性。任何帮助都是好的。

.parentclass {
  position: absolute;
  top: 110px;
 left: 165px;
 width: 470px;
 height: 260px;
 text-align: center;
 background-image: url(../images/Notification_BG.png); }

.childclass {
 position: relative;
 position: inherit;
 width: 430px;
 height: 192px;
 left: 50%;
 top: 50%;
 margin-left: -215px;
 margin-top: -96px; /* Negative half of height. */
 text-align: center;
 text-overflow: -o-ellipsis-lastline;
 border: 1px solid blue;
 font-family: Arial;
 font-size: 28px;
 color: white; }

谢谢KK

Answer 1

你用过vertical-align:middle;吗？

试试这个:

.childclass {  display: table-cell;   vertical-align: middle;   text-align: center; }

此链接一定会对您有所帮助:

vertically-center-text-in-a-100-height-div