CSS样式让元素上下左右居中
⼀、元素垂直居中
让⽗元素⾼度⾃适应，⼦元素⾼度⾃动撑开⽗级的⾼度，再给⽗元素设置相同的上下边距。
⼆、元素⽔平居中
1. ⼦元素宽度低于⽗盒⼦宽度，可设置⼦盒⼦的margin值，⽔平⽅向的值都设置为auto。（auto只在⽔平⽅向有作⽤，边距会⾃动⽆
css设置文字垂直居中限增⼤，直到撑满整个⽗元素除了⼦元素宽度之外剩余的区域，如果两个⽔平⽅向都是auto，两边都要⽆限⼤，只能达到⼀个平衡，两边距离相同，导致盒⼦居中。）
2. ⼦元素宽度⼤于⽗盒⼦宽度，设置⼦元素相对定位，设置偏移量left=50%，[a、设置⼦盒⼦margin-left=(⼦盒⼦⾃⾝宽度的⼀半的
负数)]或者[设置⼦盒⼦位移transform=translate(-50%)]。
.son{
position: relative;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
/* 让⼦元素在⽗元素中⽔平居中*/
margin-left: -50px;
/* 让⼦元素在⽗元素垂直居中*/
margin-top: -50px;
/*或者采⽤位移直接，和上⾯的选择⼀种即可*/
/*translate(x,y)分别为⽔平和垂直⽅向位移的距离*/
transform = translate(-50%,-50%)
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。