在Safari中使用CSS對齊div水平和垂直

Question

我正在嘗試使用CSS以水平和垂直方式來顯示div。 這種方法適用於Chrome，但不適用於Safari。

.in-middle { min-height: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }

代碼工作： http ： //jsfiddle.net/gjrwndye/1/

有什么建議可以改善它，使其也可以在野生動物園中使用。

Answer 1

使用瀏覽器前綴。

jsfiddle： http : //jsfiddle.net/3gkh6gz3/

display: -webkit-flex;
-webkit-justify-content: center;
-webkit-align-items: center;

您可以使用I Should I Prefix檢查是否需要使用前綴。

您可以使用Autoprefixer自動為CSS 加上前綴。