Solution 1 :


 align-content: center;

replace By

align-items: center;
justify-content: center;

Solution 2 :

Sometimes i use this

margin : 0 auto;

To make the trick

As you are using flex I think

justify-content: center;

Will do the trick

Solution 3 :

   display: flex;
   align-items: center;
   justify-content: center;
   height: 5.5em;
   background-color: #8880;

Also you can check this link: w3schools – CSS align

Problem :

I am creating a checkout page and it looks like this:

enter image description here

On the ‘Order details’ section, I would like the info of the product to be in the middle of the container.

The HTML code is as follows:

<div class="orderDetails">
    <h4><strong>Order Details</strong></h4>

    <div class="itemsInOrderContainer">
        <div class="productImgContainer">
            <img src="{{ asset('img/iamlush/shop/shopDark.jpg') }}" class="checkoutImg">

        <div class="orderDetailsContainer">
            <div class="orderInfo">
                <img src="{{ asset('img/logo/IAmLush_logoNew.png') }}" class="productInfoTitle">
                <p>Mediterranean Dark</p>

The CSS looks like:

.orderDetailsContainer {
    width: 66%;
    height: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-content: center;


Comment posted by Temani Afif

try align-itemes

Comment posted by sta

Use margin

Comment posted by Ferin Patel

display:”flex”; justify-content:”center”; align-items:”center”