dw图⽚居中怎么设置_【⾯试前】css样式垂直⽔平垂直⽔平
居中的⽅式总结
所有样式设置之前，Body元素可能会⾃带⼀个margin属性，需要将其覆盖掉。否则有些⽅法使⽤时可能会导致窗⼝边缘出现滚动条。
所以开始之前需要：
⽔平居中css表格样式
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⼦元素是⾏内元素

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