本文主要為大家詳細介紹了vue彈性佈局實現長圖垂直居上，vue實現短圖垂直居中，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。
大致效果如下圖，只考慮垂直方向。長圖可以透過捲軸看，短圖居中效果，佈局合理
html程式碼(vue作用域內)：
![]()
登入後複製
css程式碼：
.box{ height: 100%;//如高度等于网页高度 overflow: auto; display: flex; flex-direction: column; justify-content: space-around; } .swiper-slide.long{ justify-content: flex-start; }
登入後複製
js程式碼(vue作用域內，使用jquery)：
methods: { checkHeight:function (event) { var el=$(event.currentTarget); el.parent().removeClass('long'); //this.CH 为网页高度 if(el.height()>this.CH){ el.parent().addClass('long'); } } }
登入後複製
相關建議：
在css裡div怎麼垂直居中
#css實作元素水平、垂直居中
##設定元素水平、垂直居中有哪兩種方式
以上是vue實作長圖垂直居上短圖垂直居中的方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
