Почему я не могу использовать поле flex в этом div, чтобы центрировать его как по горизонтали, так и по вертикали?

Question

Я пытаюсь создать полностью центрированный слайдер с изображениями разных размеров. Я использовал flexbox для центрирования div ползунка, и теперь мне нужно сосредоточить изображения внутри него. Я тоже пытался использовать flexbox, но, похоже, это не работало для меня.

Я загрузил его here, чтобы вы могли видеть, что не так.

Answer 1

Это потому, что ваш контейнер слишком большой. Ваш контейнер должен быть размером с ваши изображения или вы должны положить display:flex; justify-content:center; align-items: center; на контейнер, содержащий изображения.

В любом случае, ваш контейнер не может иметь ширину 100% или внутри никогда не будет приведена в соответствие с центром ...

Answer 2

Просто измените свой стиль CSS, добавив это:

.slider img { 
     margin: 0 auto; 
    }