如何在 CSS 中將框居中居中？

Question

我用div創建了一個盒子，里面還有 4 個div ：

HTML：

<div className='main__container'>
        <div className='item'>Image</div>
        <div className='item'>Name</div>
        <div className='item'>Price</div>
        <div className='item'>Quantity</div>
</div>

CSS：

.main__container {
    position: relative;
    text-align: center;
    margin: 0px auto;
    display: flex;
    background-color: white;
}

.item:not(:last-child) {
    margin-right: 100px;
}

這是我得到的輸出：

我想把整個盒子放在中心。 我嘗試使用margin: 0px auto但它不起作用。

如果需要更多信息，請發表評論。

Answer 1

也許

.main__container {
    // other 
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    // other
}