对于元素的水平居中,我会根据自己之前的研究做一些总结。如果有不对的地方还请指正~1.让大小可变的元素垂直居中是因为:表格单元格的特殊属性:垂直居中等;`div.parent{显示:表格单元格;垂直对齐:中间;height:200px;}div.parentimg{}`属性行高设置`div.parent{height:100px;line-height:100px;}div.parentimg{vertical-align:middle;}`绝对定位+margin:auto;div.parent{高度:300px;宽度:300px;位置:相对;背景色:红色;}div.parentimg{位置:绝对;顶部:0;左:0;底部:0;右:0;保证金:自动;}ps。很久以前我也用过第三种方法。简单的思路是:由于top,bottom,left,right都设置为0,所以元素在marginauto之后自适应居中,所以有一天看到张新旭的博客才知道为什么:引用张大的话:1.当一个绝对定位元素,当其相反的定位方向属性同时具有特定的定位值时,会出现流体特性;2.因为left/right同时存在,所以宽度自适应包含块的paddingbox的宽度,即随包含块的paddingbox的宽度变化,包含块的宽度变化也会随之改变。margin:auto对于具有fluid属性的绝对定位元素的填充规则和普通fluid元素完全一样:如果一侧固定,则一侧为auto,auto为剩余空间的大小;如果两边都是auto,则平分剩余空间;2.size固定元素垂直居中对于固定尺寸的元素,也可以用上面的方法。1.绝对定位+margin:-元素宽度&&高度div.parent{height:200px;宽度:200px;位置:相对;背景色:红色;}div.parentimg{宽度:100px;高度:100px;位置:绝对;左:50%;顶部:50%;左边距:-50px;边距顶部:-50px;}//元素的右上角作为定位配额的参考点,所以我们需要一个负边距不同元素的宽高的一半固定宽高还有很多其他的方法,我就不一一列举了。之前看了张大大的博客,总结一下自己对line-height和vertical-align的理解。vertical-align的几个属性值,如baseline、bottom、top、middle等,与文本的基线相关联,line-height与文本垂直居中,不管其大小。例如,line-height和height可以设置文本居中,所以,同理??,vertical-align和line-height可以结合起来设置垂直居中。我觉得在网页的布局中,如果有什么看不懂的奇怪现象,可以先从line-height和vertical-align中排除。以上就是我的学习总结,希望大家坚持下去,加油,你不是一个人在奋斗。站在巨人的肩膀上学习,再次感谢张大大阮大大的各种分享。
