                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS+CSS3实现带预览图幻灯片效果

图片的居中显示问题

为什么要先top 50%，然后-1*pictures[i].clientHeight/2)+'px'就算居中了呢？

不是可以用transform的translate()来进行设置嘛？

桂花糕

2015-06-16

源自：JS+CSS3实现带预览图幻灯片效果 3-2

关注问题我要回答

1141

操作

收起

2 回答

uhelper_net
2015-06-18

top 50%,先使图片的上边据处于父元素(容器)的中线位置,在通过js计算自身高度的一半,设置给margin-top.将图片向上提升自己高度的一半.即自身中线与父元素中线对齐.translate()不知道要传入多少值.再者translate变换后有点position:relative的味道,会使原先占用的布局(位置)保持不变,会对下面元素排版,照成一定的美观影响.而margin设置后,下面的文本等内容会随之而变.