使英雄图像中的绝对元素水平和垂直居中

Question

如何设置文本(绝对)的位置中心水平和垂直的英雄形象。我已经在

下面提到了我的CSS

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;     
color: white;
}

Answer 1

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}