remove

 align-content: center;

replace By

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

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

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

Also you can check this link: w3schools – CSS align

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

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>
    <hr>

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

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

The CSS looks like:

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