如果你想让容器居中，那么你可以使用css grid创建3列。我们使两个侧列1fr，使它们的宽度相等，然后中间列为fit-content。然后我们可以使用align-self将侧边栏推到容器的边缘。CSS tricks有一个关于网格的很好的入门，Kevin Powell有一个关于youtube的有用视频
示例如下：

body {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

/* we've enclosed the two divs in to wrapper so we can use CSS grid */
.wrapper {
  display: grid;
  grid-template-columns: 1fr fit-content(0) 1fr;
  align-items: start; /* place items to the top of the container */
}

#container {
  aspect-ratio: 1/1;
  background-color: deepskyblue;
  width: 150px;
  margin-right: auto;
  padding: 100px;
}

#sidebar {
  justify-self: end; /* push the sidebar to the right so it butts up next to the container */
  background-color: #ed1c24;
  width: 75px;
  padding: 10px;
}

/* just some prettification */
.wrapper > div {
  border: 2px solid black;
  display: grid;
  place-items: center;
}

<div class="wrapper">
  <div id="sidebar">
    <p>Sidebar</p>
  </div>
  <div id="container">
    <p>Container</p>
  </div>
</div>

使用flexbox布局，因为它在大多数情况下都足够通用。添加与第一列具有相同比例的第三列;这样，所有三个列将被适当地定尺寸和居中。下面的示例使用伪元素作为第三列：

#wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#container {
  background-color: deepskyblue;
  flex: 0 0 500px;
  height: 500px;
}

#sidebar {
  flex: 0 0 200px;
  height: 200px;
  align-self: flex-start;
  background-color: rgba(255, 0, 0, 1);
}

#wrapper::after {
  flex: 0 0 200px;
  background-color: rgba(255, 0, 0, .2);
  content: 'I am a pseudo element';
}

<div id="wrapper">
  <div id="sidebar">
    <p>Sidebar</p>
  </div>
  <div id="container">
    <p>Container</p>
  </div>
</div>

在此输入代码

.main{
height:300px;
width:300px;
border:1px solid black;
}

.sidebar{
height:100px;
width:100px;
border:1px solid red;
margin: 10px auto;
position:relative;
}

.content{
height:50px;
width:50px;
border:1px solid green;
position:absolute;
top:0;
right:100%;
}

<div class="main">Main Div
<div class="sidebar">Content
<div class="content">Side box div</div>
</div>
</div>

您可以分多个步骤执行此操作：
1.将边栏定位在容器的左上方
1.将边栏向左移动到与其宽度相等的位置
首先，要将侧边栏放置在容器的左上方，我们可以将#container的位置设为relative，这样其他东西就可以相对于它放置absolute ly，然后我们可以将#sidebarabsolute放置在左上方。

#container {
  position: relative;
}

#sidebar {
  position: absolute;
  top: 0;
  left: 0;
}

接下来，我们可以将侧边栏向左移动到与其宽度相等的位置：

#sidebar {
  transform: translateY(-100%);
}