CSS

1、水平垂直居中

//弹性盒子
.box{
  display: flex;
  align-items: center;
  justify-content: center;
}


//绝对定位，translate 或配合margin设置负值
.box{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2、下拉菜单旋转动画+css三角形

<style>
.menu{
  width: 100px;
  height: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow{ 
  border: 4px solid transparent;
  height: 0;
  width: 0;
  cousor: pointor;
  box-sizing: border-box;
  border-top-color: #000;
  transform-origin: 50% 25%;
  transition: transform .8s;
}
.menu:hover .arrow{
  transform: rotate(180deg)
}
</style>

<body>
    <div class="menu">
        下拉菜单
        <div class="arrow"></div>
    </div>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。