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;

 

}
最终效果:
posted @ 2019-06-01 17:12  糖~豆豆  阅读(3795)  评论(0编辑  收藏  举报
Live2D