如何在包含多個項目的彈性容器中將一個 flexbox 項目居中

Question

下圖是我目前正在使用的。 我有一個占據整個屏幕寬度的 flex 容器（一個帶有紅色邊框的 div），它包含兩個 flex 項：一個是白色方塊，另一個是另一個包含按鈕的 flex 容器（帶有藍色邊框） .

我想要做的是在屏幕上水平居中白色方塊，並讓它在調整窗口/屏幕大小時按鈕容器 div 不會碰撞/進入白色方塊。 我不知道如何 go 關於這個，所以任何幫助將不勝感激。 我的代碼在圖片下方。

<div class="middle-content-section">
        <div class="drawing-pad-container"></div>
        <div class="settings-container">
            <button class="grid-toggle-button">Show grid</button>
            <button class="grid-toggle-button">Hover to draw</button>
        </div>
    </div>

.middle-content-section {
    margin-top: 50px;
    display: flex;
    gap: 50px;
    width: 100%;
    border: 1px solid red;
}

.settings-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid blue;
}

.drawing-pad-container {
    height: 500px;
    width: 500px;
    background: rgb(255, 255, 255);
    filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
    transition: 0.3s;
    display: grid;
    grid-template-rows: repeat(30, 1fr);
    grid-template-columns: repeat(30, 1fr);
    flex: 0 0 auto;
}

Answer 1

如果您只是想將 div 中的白色方塊居中，那么您真正需要的只是一些邊距。

margin: 0 auto;

所以我修改了我的答案，希望能更好地滿足你的要求。 這有點hacky，但似乎確實有效。

我所做的是再創建一個名為items的容器，它可以容納兩個內部物品。 然后我在容器上設置一個自動邊距以使白框和設置欄居中。 該欄的固定寬度為 100 像素，因此我做了一個transform: translateX(100px) ，然后將所有內容移動 100 像素，以校正寬度並因此偏移設置欄。

下面是結果的代碼片段，其中更改間隔。

 .middle-content-section { margin-top: 50px; display: flex; width: 100%; border: 1px solid red; }.items { margin: 0 auto; transform: translateX(100px); gap: 50px; display: flex; }.settings-container { width: 100px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; border: 1px solid blue; }.drawing-pad-container { height: 500px; width: 500px; background: rgb(255, 255, 255); filter: drop-shadow(2px 2px 3px rgb(180, 180, 180)); transition: 0.3s; display: grid; grid-template-rows: repeat(30, 1fr); grid-template-columns: repeat(30, 1fr); flex: 0 0 auto; }

 <div class="middle-content-section"> <div class="items"> <div class="drawing-pad-container"></div> <div class="settings-container"> <button class="grid-toggle-button">Show grid</button> <button class="grid-toggle-button">Hover to draw</button> </div> </div> </div>

Answer 2

參考：coryrylan.com

 section { width: 200px; border: 1px solid #2d2d2d; display: flex; justify-content: center; align-items: center; }

 <section> <div>1</div> <div>2</div> <div>3</div> </section>