Flexbox centering doesn't work

[tiborsaas]

I've tried many approaches, none seems to work, like: display: flex, display: -webkit-flex;

Problem is that the text appears at the top of the page instead of the middle.

Example files:
http://pastebin.com/2hx9e7yT
http://pastebin.com/H7uRKjYV

I'm using PhantomJS 1.9

[ghost]

try using the early spec syntax:

  display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;

Early flex spec howto:
http://www.html5rocks.com/en/tutorials/flexbox/quick/
Using Phantom 1.9 I was able to get this working.

[JacksonGariety]

On phantom 2.1.1 and neither syntax works at all.

[enpfeff]

on 2.1.1 linux x64 build flex-direction column isn't working as expected

[Edit] - narrowed down the issue to when you are using multiple browser prefixes

display: flex;
flex-direction: column;
works on linux

but

display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

-webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;

does not

[tuxayo]

See #14365

[aliatsis]

+1

[vitallium]

Could you please try again with 2.5 binary? Thanks!

[attiks]

Manual work-around works, download from https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.5.0-beta-linux-ubuntu-xenial-x86_64.tar.gz and extract phantomjs to node_modules/phantomjs-prebuilt/bin/phantomjs

[stale]

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!