Getting flex box to work for centering in Safari

Question

I'm trying to center my content using flex box, which works perfectly in chrome but doesn't work in Safari. I tried adding this:

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

But it didn't change anything. When I add display: -webkit-box to .main it moves main instead of moving the content within it. Have been playing around with different things in the Safari dev tools. What am I doing wrong??

.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  position: absolute;
  font-family: sans-serif;
  text-align: center;
}