Why is this child not perfectly centered in Safari 6?

[nixnerd]

Here is the codepen:

http://cdpn.io/shDlJ

This should work fine… but it doesn’t.

[TheDoc]

Probably this:

Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.

I see you’re using display: -webkit-box; for old Safari. I’m sure it simply has a different implementation than the current spec.

[TheDoc]

I’ve got a site that is built on flexbox and I’m wondering how in the hell to center things.

I would argue that that’s a bit of an issue to begin with considering it’s lack of < IE10 support, but obviously your choice! When you’re using a super new technology like this, it simply has to be expected that not everything is going to work properly.

What would you do?

I wouldn’t build a site using flexbox to begin with, so I don’t think my opinion particularly matters ;)

Unfortunately, my Safari is at v7 so I have nothing to test with for ya. Possible solution: give your child a position of absolute and t/r/b/l values of 0. This should kick margin: auto in the but and make it work properly in all browsers.

[TheDoc]

See here: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

[TheDoc]

Possibly more help: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Vertical and horizontal centering within a flexcontainer is trivial. Just set justify-content and/or align-items to center. Again, it depends on the orientation of the main axis, so whether flex-direction is set to row or column.

That might be the winner, there!

[Alen]

I’ll return to you in 3 years when browser support is better.

You could feature detect and serve flexbox to browsers that support it.

http://vimeo.com/69531447

[brendan]

I think using flexbox for your entire layout is still a little too new for even the most cutting edge projects (obviously thats a decision you should be making based on your audience/analytics)

Its out there in the wild already in various forms, Chromes video controls are all flex items (you may need to enable the shadow dom to inspect it) and also on apple.com (http://www.apple.com/iphone/compare/ the 3 callouts on grey boxes near the bottom). The chrome one is different because its guaranteed support (they know what browser its in) but the example on apple.com I think is more real world, you can easily fall back to a non equal height, un-vertically centered box and its not the biggest deal.

IMO, use it for progressive enhancement, don’t rely on it.

[basement31]

If you are only using the ‘new’ syntax I believe theres only -webkit- to prefix, and Im pretty sure mozilla are not going to be doing any vendor prefixes going forward?

[Author]

Posts