为什么对齐内容：居中；居中？不行？

Question

我正在创建一个结帐页面，它看起来像这样：

在“订单详细信息”部分，我希望产品的信息位于容器的中间。

HTML代码如下：

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

CSS如下：

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

Answer 1

删除

 align-content: center;

替换为

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

Answer 2

有时候我用这个

margin : 0 auto;

把戏

我认为您正在使用flex

justify-content: center;

会成功的

Answer 3

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

您还可以检查以下链接：w3schools - CSS align