This is a demo document for the technique described in the article The CSS3 Flexible Box Layout (flexbox). Please refer to the article for details and context.
This box is centered on the screen, both horizontally and vertically. You need to specify a width for it, but height is optional. Note that you can use max-width to make the width flexible, as on this demo page (try resizing your browser window).
The technique used here currently only works in Gecko and WebKit browsers, i.e. Firefox, Safari, Chrome, and others. It does not work in Opera or Internet Explorer. Browsers that don’t support flexbox do center the content horizontally, which is a decent fallback.
Please view source to see the HTML and CSS used.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.