[Solved] center div on screen with flexbox - CSS-Tricks

This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
April 1, 2014 at 3:22 am #167284
operaman_22
Participant
Apologies if this has already been covered in the forum. I did not see any search functionality on the site.

I’ve posted about this on StackOverflow but thought I’d post here as well.

I thought it was safe to use flexbox on a mobile web app I’m developing, since I’m only using it to vertically and horizontally center a div on a page, but on Android 4.0 the div is aligned at the top left of the screen and is given a height of 100%. I wonder what I am doing wrong.

My CSS:
```
#flex-container {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        -webkit-box-flex-direction: row;
        -moz-box-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #flex-item {
        margin: auto;
    }
```
April 1, 2014 at 3:45 am #167286

Paulie_D
Member

Not enough information to go on as we have no HTML

What are you centering as it’s not clear from your code?

April 1, 2014 at 3:59 am #167288
operaman_22
Participant
Apologies, I didn’t think the HTML was necessary, as it’s just a basic container and div:
```
<body>
    <div id="flex-container">
        <div id="flex-item">This is centered</div>
    </div>
</body>
```
April 1, 2014 at 4:07 am #167289

Paulie_D
Member

I’m not sure why you are fixing the position of the container but this works.

http://codepen.io/Paulie-D/pen/lABxv/

Not sure about Android.

April 1, 2014 at 4:32 am #167290

operaman_22
Participant

Alas, no, it only centers horizontally on Android.

The position: fixed is because this is a modal. The container is the overlay and needs to stretch to the full page dimensions. Likewise, I cannot specify a width or height on the centered div, as its size will vary according to content.

April 1, 2014 at 4:34 am #167291

Paulie_D
Member

From this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It’s unclear as to which syntax Android 4 is using…

Ditto: http://caniuse.com/flexbox

April 1, 2014 at 4:50 am #167295

operaman_22
Participant

Yes, thanks. I had, of course, read that Guide to Flexbox (along with Chris Coyier’s very informative posts about flex support, and other sources) before posting here. According to the various browser support charts, Android 2.1+ supports the old flex syntax. Neither the old nor the new seem to be working, though.

April 1, 2014 at 6:54 am #167310
operaman_22
Participant
I have finally found a combination that works on Android:
```
#flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
```
Thank you, Paulie_D, for your help with this.
April 1, 2014 at 7:21 am #167314

Paulie_D
Member

Whatever I could offer (which wasn’t very much) you are more than welcome to.

:)
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘CSS’ is closed to new topics and replies.