absolute定位后居中的方法

要求 ： 子级需要加动画上下动起来，并且需要在全屏居中

html代码如下：

<div class="row m-0 w-100 mybanner">

<!-- 左侧第一列开始 -->

<div class="col-12 p-0 w-100 main2 img ">

<a href="#" class="d-block w-100 h-100 index10">

<div class="w-100 h-100 parent1">

<div class="text-light child1 index10 ">

<h1 class="font-h1 mb-3">作品/展示</h1>

<p class="font-gray px-4">站在新起点，迎接新挑战，创造新成绩。</p>

 

</div>

<div class="bg bg-active"></div>

</div>

<div class="my-center">

<i class="iconfont icon-xiajiantou arrows1 "></i>

</div>

</a>

 

</div>

 

</div>

 

css代码如下：

.my-center{  //父级

position: absolute;

width: 30px;

left: calc(50% - 15px);

z-index: 9999;

bottom: 10%;

 

}

.arrows1{  //子级

font-size:30px;

text-align:center;

animation:fadeInDown 1s ease 1s infinite;

color: #fff;

position: absolute;

}

最终效果：