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;

 

}

最終效果：