0

I am trying to center the boxes using flex but they are aligning at the centre top and not in the middle of the page.

I am not able to get what the problem is, kindly help me out.

`

.summary{
    height: 100%;
}
.box__container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.boxes{
    background-color: aqua;
    width: 200px;
    height: 100px;
    /* margin: 0px 10px 0px 10px; */
}

`

`

import React from 'react'
import './Summary.css'

function Summary() {
  return (
    <div className='summary'>
        <div className='box__container'>
            <div className='boxes'>
                summary
            </div>
            <div className='boxes'>
                summary
            </div>
        </div>
    </div>
  )
}

export default Summary

`

Vibhu Khare
  • 3
  • 2
  • I think `height: 100%;` in `.box__container` should do the trick. It really depends on a parent element having some kind of fixed height or not. 100% height won't do anything unless the parent element is fixed with a height, for example `height: 100vh;` or `height: 500px;`. – Bqardi Oct 28 '22 at 22:03

0 Answers0