| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Vertical centering of multiple items with flexbox</title>
- <style>
- html, body {
- height: 100%;
- }
- body {
- margin: 0;
- font-family: Avenir Next, Avenir, Franklin Gothic, sans-serif;
- }
- .flex-container {
- height: 100%;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: -webkit-box;
- display: -moz-box;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- flex-direction: column;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- -webkit-box-pack: center;
- -moz-box-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- -webkit-box-align: center;
- -moz-box-align: center;
- align-items: center;
- background-color: #12459e;
- }
- .flex-item {
- max-width: 25em;
- padding: 2em;
- margin: 1em;
- background-color: #fff;
- }
- </style>
- </head>
- <body>
- <div class="flex-container">
- <div class="flex-item">
- <h2>Not so lost in space</h2>
- <p>This item sits right in the middle of its container, regardless of the dimensions of either.</p>
- </div>
- </div>
- </body>
- </html>
|
