Access our premium support and let us know your problems, we will help you solve them.

0
No products in the cart.

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • in reply to: Flexbox: center horizontally and vertically #9434

    margin: auto works "perfectly" with flexbox i.e. it allows to center item vertically and horizontally.

    html, body {
      height: 100%;
      max-height: 100%;
    }
    
    .flex-container {
      display: flex;
        
      height: 100%;
      background-color: green;
    }
    
    .container {
      display: flex;
      margin: auto;
    }
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS</title>
    </head>
    <body>
      <div class="flex-container">
        <div class="container">
          <div class="row">
            <span class="flex-item">1</span>
          </div>
          <div class="row">
            <span class="flex-item">2</span>
          </div>
          <div class="row">
            <span class="flex-item">3</span>
          </div>
         <div class="row">
            <span class="flex-item">4</span>
        </div>
      </div>  
    </div>
    </body>
    </html>
Viewing 1 post (of 1 total)