老师，在图片画廊组件部分中，我的图片不能垂直居中手机屏幕，是偏上一点，和解？

Question

老师，在图片画廊组件部分中，我的图片不能垂直居中手机屏幕，是偏上一点，和解？

Answer 1

Kunen 2020-02-09 00:53:07

原因：wrapper中加一个"padding-bottom: 100%" ，这个100%比例是相对宽度的，所以出来的是一个正方形的容器。

解决：只写一个宽度100%

.wrapper
 width: 100%

Answer 2

那只程序媛 2018-09-27 00:05:17

我的也是这样，会靠上面一些，后面自己花了半个小时调试过后发现可以啦，贴上我的代码给小伙伴们参考：

<style lang="stylus" scoped>
.container
z-index 99
position fixed
left 0
right 0
top 0
bottom 0
background #000
display flex
flex-direction column
justify-content center
.wrapper
display flex
justify-content center
.gallary-img
display inline
margin auto 0
width 100%
.swiper-pagination
position fixed
color #ffffff
bottom 1rem
z-index 100
</style>

html部分和老师的 一样，最后的效果如图

Answer 3

Dell 2018-06-08 16:50:30

这种css的基础自己查一下解，毫无难度的东西

Answer 4

慕的地2446357 2018-06-08 10:43:58

是不是出现了如图这种情况？wrapper对应的div是居中的，但是<swiper>对应的就没有撑满整个div了

• 慕的地2446357 #1

  这个是由于图片宽高不相等导致的，应该如何解决呢？

• 提问者 edsion 回复 慕的地2446357 #2

  是的，我也是这样？有解决方案吗？

• 慕的地2446357 回复 提问者 edsion #3

  暂时没有诶，因为对css不太熟

点开查看后面3条评论

Answer 5

Dell 2018-06-01 15:00:40

我觉得你的布局里面多了margin或者padding，到控制台里测试一下