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>
