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

.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; }

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

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>