為什么我不能在這個 div 中使用彈性框來水平和垂直居中？

Question

我正在嘗試使用不同大小的圖像構建一個完全居中的滑塊。 我使用 flexbox 將滑塊的 div 居中，現在我必須將其中的圖像居中。 我也嘗試在那里使用 flexbox，但它似乎對我不起作用。

我把它上傳到這里，這樣你就可以看到出了什么問題。

Answer 1

那是因為你的容器太大了。 你的容器應該和你的圖片一樣大，或者你應該把display:flex; justify-content:center; align-items: center; display:flex; justify-content:center; align-items: center; 在包含圖像的容器上。

無論哪種方式，您的容器都不能有 100% 的寬度，否則內部永遠不會與中心對齊......

Answer 2

只需通過添加以下內容來編輯您的 css 樣式：

.slider img {
      margin: 0 auto;
    }