具有居中文本的div（垂直/水平）上的CSS转换

Question

我很想在div元素上实现可接受的转换，div元素包含垂直和水平居中的文本。

带有文本的span元素随着过渡到顶部而移动并创建这种丑陋的淡出效果。我偶然发现了the following question，但不幸的是，对于跨度包装元素的绝对位置，它没有多大帮助。

HTML

<!-- Success -->
<div class="panel panel-default action-message-div message-panel-success" ng-hide="lobby.actionMessage.isError === null || lobby.actionMessage.isError === true">
  <span class="action-message-span">{{lobby.actionMessage.data}}</span>
</div>

CSS

.action-message-div {
  height: 75px;
  line-height: 75px;
  text-align: center;
}


.action-message-span{
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.message-panel-success {
  border: 2px solid #008000;
  background-color: #90EE90;
}

.message-panel-success.ng-hide-add, .message-panel-success.ng-hide-remove {
  transition: all ease-out 1s;
  -webkit-transition: all ease-out 1s;
  -moz-transition: all ease-out 1s;
  -o-transition: all ease-out 1s;
  -ms-transition: all ease-out 1s;
}

.message-panel-success.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

解决方案

line-height: 0;中的message-panel-success.ng-hide搞砸了我的CSS - 当然，你无法将其从75px更改为0。