css的绝对居中

第一种： 伸缩盒子，要定义在父类

display: flex;
justify-content: center; //水平居中
align-items: center;//垂直居中

注意：不能加margin，否则无效，padding（是否能加？）

第二种：不知道盒子长宽：（比较好）

top、right、bottom、left全为0， margin: auto;//垂直水平居中：
position: relative;//给父盒子相对定位，
position: absolute;//给子盒子绝对定位，

第三种：知道盒子长宽
父元素相对定位
子元素绝对定位

left: 50%;top: 50%;
margin-left: 负的子盒子宽度一半。
margin-top: 负的子盒子高度一半；

第四种：使用css3 translate属性，使用的是偏移量

给父盒子相对定位，position: relative;
给子盒子绝对定位，position: absolute;

子盒子：

left: 50%; 
top: 50%; 
transform: translate(-50%,-50%);

第五种：

设置盒子外边框，使外盒子居中，左右外边框值相等（长度未知）
水平居中:在div的position为relative（相对定位时有效，绝对定位无效）

水平居中：给div设置一个宽度，然后添加margin:0 auto属性
————————————————
版权声明：本文为CSDN博主「HDdgut」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/HDdgut/article/details/96199774