如何在包含多个项目的 flex 容器中将一个 flexbox 项目居中

Question

下面的图片是我目前正在使用的。我有一个占据整个屏幕宽度的 flex 容器（一个带有红色边框的 div），它包含两个 flex 项：一个是白色方块，另一个是另一个包含按钮的 flex 容器（带有蓝色边框） .

我想要做的是在屏幕上水平居中白色方块，并让它在调整窗口/屏幕大小时按钮容器 div 不会碰撞/进入白色方块。我不知道该怎么做，所以任何帮助将不胜感激。 我的代码在图片下方。

<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

参考：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>

Answer 2

如果您只是想将 div 中的白色方块居中，您真正需要的只是一些边距。

margin: 0 auto;

所以我修改了我的答案，希望能更好地满足您的要求。这有点hacky，但似乎确实有效。

我所做的是再创建一个名为items 的容器，它可以容纳两个内部物品。然后我在容器上设置一个自动边距以使白框和设置栏居中。该栏的固定宽度为 100 像素，因此我做了一个 transform: translateX(100px)，然后将所有内容移动 100 像素，以校正宽度并因此偏移设置栏。

下面是结果的代码sn-p，更改间隔。

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