Safari flex vertical align issue

Asked Feb 11 '17 at 22:24

Active Feb 12 '17 at 00:25

Viewed 711 times

I'm trying to align vertically a div inside another div using flex boxes. This code is working on Chrome, IE Edge, Opera and Firefox:

.editing-viewport {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -ms-flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -webkit-box-align: center;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-sizing: border-box;
}

But on Safari, the div inside the editing-viewport div does not look completely centred on the Y axis. Looks like there are some extra pixels above the div.

edited Feb 12 '17 at 00:25

Michael Benjamin

307,417
93
525
644

asked Feb 11 '17 at 22:24

andresscode

1,145
1
9
21

2

post all of your code please so we have a [mcve] – Michael Coker Feb 11 '17 at 23:11
Without all relevant code we can't reproduce the problem. So at best we can guess what's wrong. Here's a general guide: http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Feb 12 '17 at 00:28

Safari flex vertical align issue

0 Answers0