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?

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%;


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

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

      <div class="container">
        <h4>Annual Plan</h4>
        <a href="#">Change</a>

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

Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here