在Safari中使用CSS对齐div水平和垂直

Question

I am trying to algn a div in Horizontal & Vertical way using CSS. This approach is working on Chrome, but doesn't work in Safari.

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

Code Working: http://jsfiddle.net/gjrwndye/1/

Is there any suggestions how can I improve it to make it working on safari as well .

Answer 1

Use browser prefixes.

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

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

You can check if you need to use prefixes using Should I Prefix .

You can automatically prefix your CSS using Autoprefixer .