vant样式css居中_【面试前】css样式垂直/水平/垂直水平居中的方式总结

https://blog.csdn.net/weixin_39731916/article/details/113490107

所有样式设置之前，Body元素可能会自带一个margin属性，需要将其覆盖掉。否则有些方法使用时可能会导致窗口边缘出现滚动条。

所以开始之前需要：

水平居中
1. 父元素设置text-align:center,子元素为行内元素或设置为行内元素，此时图片和文字都是居中显示的。

2. 当图片居中，图片下面的说明文字在居中位置并且需要左对齐显示的话，设置包裹的容器宽度为图片的宽度，并margin: 0 auto; 此方式对于块级元素和行内元素都适用。

3. 子元素宽已知px。相对于父元素定位，left偏移50%，左外边距设为自身宽高的负一半，需要设置父元素宽度。

4. transform

5. flex

垂直居中
1. 父元素display: table-cell;vertical-align: middle;子元素会垂直居中于父元素，需要确定父元素的高度。

缺点：margin属性失效，因为margin不适用于表格布局；

tabel-cell的元素宽高设置为百分比时无效果，如果需要宽度100%，将container宽度设置为极大的一个值；

当container需要设置为absolute的时候table-cell失效，因为absolute强制把非flex元素设置为block，解决办法是在外面再套一层容器进行absolute

2. 子元素高已知px。相对于父元素定位，top偏移50%，上外边距设为自身宽高的负一半，注意父元素需要设置height

3. transform

4. flex

水平垂直居中
1. 子元素宽高已知px。相对于父元素定位，top和left偏移50%，左外边距和上外边距各设为自身宽高的负一半；

缺点：确定的大小，无法自适应。

2. transform：将左外边距和上外边距负值修改为transform: translate(-50%,-50%),此时具有自适应的效果。原理：translate里的百分比是根据元素自身宽高计算的。

3. 子元素相对于父元素绝对定位，四周为0，并且margin值为auto

4. 父元素display: table-cell;vertical-align: middle;text-align:center子元素是行内元素

5. display: flex;justify-content: center;align-items: center;缺点：不兼容IE浏览器。

————————————————
版权声明：本文为CSDN博主「weixin_39731916」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39731916/article/details/113490107

原文链接：https://blog.csdn.net/weixin_39731916/article/details/113490107