CSS：如何将文本置于过渡位置？

Question

我创建了2个内部跨度来保持当前和其他内容显示在按钮悬停上，初始状态和悬停状态之间的过渡工作正常，但我不知道如何垂直和水平居中文本？！

.btn {
  background: #C5D200;
  color: #fff;
  width: 150px;
  height: 30px;
  padding: 10px 20px;
  border-radius: 20px;
  display: block;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.content {
	position: absolute;
	transition: top .4s;
}

.top { top: 0; }

.btn:hover .top { top: -50px; }

.bottom { top: 50px; }

.btn:hover .bottom { top: 0; }

<div>
  <a href="#" class="btn">
    <span class="top content">Buy Now</span>
    <span class="bottom content"> On Sale $1</span>
  </a>
</div>

Answer 1

＆＃13;

＆＃13;

.btn {
  background: #C5D200;
  color: #fff;
  width: 150px;
  height: 30px;
  padding: 10px 20px;
  border-radius: 20px;
  display: block;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.content {
	position: absolute;
	transition: top .4s;

    /*add this*/
    height: 50px;
    line-height: 50px;
    width: 190px;
    text-align: center;
    left: 0px;


}

.top { top: 0; }

.btn:hover .top { top: -50px; }

.bottom { top: 50px; }

.btn:hover .bottom { top: 0; }

＆＃13;

<div>
  <a href="#" class="btn">
    <span class="top content">Buy Now</span>
    <span class="bottom content"> On Sale $1</span>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用弹性框居中

.btn{
    display: flex;
    align-items: centre;
    justify-content: center;
}

Answer 3

  

只需调整左侧和顶部属性。

.btn {
  background: #C5D200;
  color: #fff;
  width: 150px;
  height: 30px;
  padding: 10px 20px;
  border-radius: 20px;
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.content{
  position: absolute;
  transition: top .4s;
  top: 15px;
  left: 60px;
}

.bottom           {top: 500px;}
.btn:hover .top   {top: -500px;}
.btn:hover .bottom{top: 15px;}

<div>
  <a href="#" class="btn">
    <span class="top content">Buy Now</span>
    <span class="bottom content"> On Sale $1</span>
  </a>
</div>