Center image vertically

[marviobezerra]

How do the centralized image vertically?

[desandro]

With your own CSS. See https://css-tricks.com/centering-css-complete-guide/

[oksas]

Just wanted to drop a quick solution here for anyone else like myself that had this problem but struggled for a bit on a solution. I thought there would be more trouble doing this than there actually was, but it's as easy as David's comment makes it sound. I was thinking the absolute positioning that Flickity uses would cause some trouble, but it was seriously just as simple as adding this code:

.flickity-slider {
  display: flex;
  align-items: center;
}

.flickity-slider is one of the elements that is created by Flickity, and is the container of all the images (cells) themselves. Here's a quick screen snippet of the element as seen in Chrome's devtools:

Hope that helps someone!

[turnstylerj]

Just wanted to add to this thread if anyone else winds up here after Googling this - the above CSS works great, but was causing intermittent issues in my build with Flickity being unable to calculate positioning correctly with the flexbox wrapper. To solve it, I encapsulated it into a class I'm adding after the slider has initialized, in the ready event:

on: {
  ready: () => {
    carouselEl.classList.add('flexy-carousel');
  }
}

Then in the CSS, applying the styles above as .flexy-carousel .flickity-slider { instead. Hope this helps someone else!