html – Centering a div in css using flexbox


I’m trying to center a div vertically using flexbox but align-items:center; only changes the contents inside the div. I tried adding height:100% but still the same. what should I add/change in the code?
CSS

body {
    background: url(images/pattern-background-mobile.svg);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    height: 100%;
    
}

.container {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border: 2px solid red;
    padding: 0;
    margin: 2em;
    width: 80%;
}

HTML

<body>
  <div class="main">
    <div class="container">
      <div class="hero">
      </div>

      <h1 class="title">Order Summary</h1>
      <p>You can now listen to millions of songs, audiobooks, and podcasts on any 
        device anywhere you like!
      </p>

      <div class="container">
        <h4>Annual Plan</h4>
        <p>$59.99/year</p>
        <a href="#">Change</a>
      </div>

      <button>Proceed to Payment</button>
      <a href="#">Cancel Order</a>
    </div>
  </div>
</body>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here