<style>
body{/*让body所有元素正居中*/
display:flex;
justify-content:center;/*水平居中*/
align-items: center;/*垂直居中*/
height:100vh;/*不加高，无法垂直居中*/
}
div{
position:relative;
width:200px;
height:200px;
box-shadow:16px 14px 20px red;
display:flex;
justify-content:center;/*水平居中*/
align-items: center;/*垂直居中*/
overflow:hidden;
}
div::before{/*伪元素*/
content:'';/*特性1，需要激活*/
background:conic-gradient(#fa0667 20deg,transparent 120deg);/*锥形渐变*/
width:150%;/*放大再用over-flow隐藏*/
height:150%;
position:absolute;
animation:rotate 2s linear infinite;/*linear匀速*/
}
div::after{/*伪元素*/
content:'www.cjw123.com';/*特性1，需要激活*/
display:flex;
justify-content:center;/*水平居中*/
align-items: center;/*垂直居中*/
color:white;
width:190px;
height:190px;
background:black;
position:absolute;
}
@keyframes rotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(-360deg);
}
}
</style>
<div></div>
<p>所有的要将元素放在正居中，均要用这三行代码</p>
