swiper-slide 内容垂直居中

小小志 · 发表于 2015-5-5 09:32:11

首先谢谢管理员的解答，我先问下如何设置swiper-slide中的内容垂直居中

stitchC · 发表于 2017-10-9 16:05:31

不好意思我来挖坟了昨天也在苦恼这个问题但是今天算是解决了，解决方案并不能说是完美
swiper 会产生两个包裹层一个是 container，另外一个是 wrapper，我的解决方法是令这两个东西高度100%，再将wrapper 设置display 为 flex 然后设置 align-items: center 就可以了

275189279 · 发表于 2015-5-5 15:54:42

里面的内容垂直居中就跟swiper没关系了吧，就是正常div包裹起来，如果高度百分百，那么用下绝对定位，然后margin-top设置为元素高度的一半的负数值，就能实现垂直居中，还有些属性vertical-align: middle、padding-top、padding-bottom结合、line-height的文字居中都能实现的，百度下div内容垂直居中，有很多解决办法

小小志 · 发表于 2015-5-5 17:40:56

275189279 发表于 2015-5-5 15:54
里面的内容垂直居中就跟swiper没关系了吧，就是正常div包裹起来，如果高度百分百，那么用下绝对定位，然后m ...

是每个swiper-slide 滑块的内的内容居中，你说的那几个方法都不适合，因为如果swiper-slide 滑块里面是图片的话，每张图片按比例缩放的宽高都不一样，更不可能用JS来计算，内容的高度不确定垂直居中只能用到display:table-cell; vertical-align:middle;，但是这种方法由于受到默认样式swiper-wrapper层这个display: flex;属性的限制变的无效了。

mzl · 发表于 2015-5-28 14:44:01

如果哥哥切换页面的高度不一样，底部会出现空白怎么去掉

mzl · 发表于 2015-5-28 14:44:21

如果各个切换页面的高度不一样，底部会出现空白怎么去掉

mzl · 发表于 2015-5-28 14:46:03

mzl 发表于 2015-5-28 14:44
如果各个切换页面的高度不一样，底部会出现空白怎么去掉

有的页面比较高，而又的页面比较短，高的页面会超过屏幕的高度

小小 · 发表于 2015-8-6 10:40:27

我也很想知道，怎么垂直居中，没人回答了么

荷斯坦阿云 · 发表于 2016-2-17 15:14:58

小小发表于 2015-8-6 10:40
我也很想知道，怎么垂直居中，没人回答了么

我的方式是把图片用background来展现出来background-position:center 0，然后这个展现背景图片的div在silde这个div下面，给这个div再width:100%;设置个高度完事了~~

柒侠伍义 · 发表于 2017-10-25 17:46:37

http://bbs.swiper.com.cn/forum.p ... p;extra=&page=1

第09章：图片铺满窗口问题