Javascript 将一个div居中并向该div附加一个右菜单

我需要将一个主div居中，并在该项的右侧附加一个固定菜单。我需要主div保持在中间，右菜单“固定”到中间div

目前，我使用

flex

将div居中，但这会导致两个项目居中（意味着主div并不真正居中）

这是所需的布局：

const DivContainer = styled.div`
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 60;
  width: 100%;
`;

const MainDiv = styled.div`
  width: 300px;
  padding: 35px 15px;
`;

const MenuDiv = styled.div`
  display: flex;
  cursor: pointer;
  flex-shrink: 0;
  flex-direction: column;
  margin-top: 85px;
  order: 10;
`;

当前布局：

const DivContainer = styled.div`
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 60;
  width: 100%;
`;

const MainDiv = styled.div`
  width: 300px;
  padding: 35px 15px;
`;

const MenuDiv = styled.div`
  display: flex;
  cursor: pointer;
  flex-shrink: 0;
  flex-direction: column;
  margin-top: 85px;
  order: 10;
`;

代码如下所示（我正在使用React with styled components）：

容器：

const DivContainer = styled.div`
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 60;
  width: 100%;
`;

const MainDiv = styled.div`
  width: 300px;
  padding: 35px 15px;
`;

const MenuDiv = styled.div`
  display: flex;
  cursor: pointer;
  flex-shrink: 0;
  flex-direction: column;
  margin-top: 85px;
  order: 10;
`;

主分区：

const DivContainer = styled.div`
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 60;
  width: 100%;
`;

const MainDiv = styled.div`
  width: 300px;
  padding: 35px 15px;
`;

const MenuDiv = styled.div`
  display: flex;
  cursor: pointer;
  flex-shrink: 0;
  flex-direction: column;
  margin-top: 85px;
  order: 10;
`;

菜单分区：

const DivContainer = styled.div`
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 60;
  width: 100%;
`;

const MainDiv = styled.div`
  width: 300px;
  padding: 35px 15px;
`;

const MenuDiv = styled.div`
  display: flex;
  cursor: pointer;
  flex-shrink: 0;
  flex-direction: column;
  margin-top: 85px;
  order: 10;
`;

其呈现方式如下所示：

<DivContainer>
  <MainDiv />
  <MenuDiv />
</DivContainer>

---

您可以将其包装在一个零宽度的div中，溢出可见：

#包装器{
显示器：flex；
边框：实心3px绿色；
证明内容：中心；
}
#主要{
边框：纯色2倍橙色；
宽度：50%；
}
#没有宽度{
宽度：0；
溢出：可见；
}
#菜单{
宽度：100px；
边框：纯红2px；
}

居中的
“零”宽度div，因此不影响居中

您可以将其包装在一个零宽度的div中，溢出可见：

#包装器{
显示器：flex；
边框：实心3px绿色；
证明内容：中心；
}
#主要{
边框：纯色2倍橙色；
宽度：50%；
}
#没有宽度{
宽度：0；
溢出：可见；
}
#菜单{
宽度：100px；
边框：纯红2px；
}

居中的
“零”宽度div，因此不影响居中

将其包装在另一个与主div宽度相同的div中，并为其子div设置最小宽度

.wrapper{
显示器：flex；
宽度：300px；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：100%；
}
梅因先生{
宽度：300px；
最小宽度：300px；
最小高度：200px；
背景颜色：海蓝宝石；
}
.菜单{
宽度：80px；
最小宽度：80px；
最小高度：200px；
背景色：卡德蓝；
位置：相对位置；
}

---

将其包装在另一个与主div宽度相同的div中，并为其子div设置最小宽度

.wrapper{
显示器：flex；
宽度：300px；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：100%；
}
梅因先生{
宽度：300px；
最小宽度：300px；
最小高度：200px；
背景颜色：海蓝宝石；
}
.菜单{
宽度：80px；
最小宽度：80px；
最小高度：200px；
背景色：卡德蓝；
位置：相对位置；
}

---

您可以将侧边栏放在容器内，然后将其推出，右边留有负边距

body，
html{
身高：100%；
保证金：0；
}
.集装箱{
身高：100%；
宽度：100%；
边框：2倍纯黄色；
边界半径：5px；
框大小：边框框；
保证金：5px；
显示：网格；
放置项目：中心；
}
.中心{
宽度：200px；
高度：200px；
边框：2倍纯黄色；
边界半径：5px；
}
.侧边栏{
宽度：50px；
高度：200px；
外形：2倍纯色品红；
边界半径：5px；
/*重要的*/
浮动：对；
右边距：-50px；
}

所容纳之物
边栏

您可以将侧边栏放在容器内，然后将其推出，右边留有负边距

body，
html{
身高：100%；
保证金：0；
}
.集装箱{
身高：100%；
宽度：100%；
边框：2倍纯黄色；
边界半径：5px；
框大小：边框框；
保证金：5px；
显示：网格；
放置项目：中心；
}
.中心{
宽度：200px；
高度：200px；
边框：2倍纯黄色；
边界半径：5px；
}
.侧边栏{
宽度：50px；
高度：200px；
外形：2倍纯色品红；
边界半径：5px；
/*重要的*/
浮动：对；
右边距：-50px；
}

所容纳之物
边栏

一种黑客的方法是将菜单div设置为相对父菜单中的绝对值。将其左边距设置为父级的宽度。否则，flex并不是容器的正确解决方案。一种黑客的方法是在相对父级中使menu div成为绝对的。将其左边距设置为父级的宽度。否则，flex不是容器的正确解决方案。谢谢您的建议。它让人感觉很不舒服（当屏幕调整大小时会引起问题），但这最终还是在一些媒体查询的帮助下起到了作用。谢谢你的建议。它让人感觉很不舒服（当屏幕调整大小时会引起问题），但这最终是在一些媒体查询的帮助下实现的。