有问题的居中div：

#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 550px;
  width: auto;
  background: rgba(28, 28, 54, 0.70);
  padding: 15px;
  border: 1px solid #1c1d29;
  border-radius: 3px;
  display: flex;
}

#actualcontainer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
}

#content {
  width: 550px;
  height: 100%;
  background-color: #1c1c36;
  padding: 25px;
  border-radius: 3px;
  align-items: center;
  justify-content: center;
  display: inline-block;
  overflow-y: auto;
  overflow-x: clip;
  box-sizing: border-box;
}

#sidebar {
  width: 300px;
  height: 100%;
  background: transparent;
  overflow-y: none;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  padding-left: 20px;
}

#sidebar p {
  text-align: center;
}

#sidebar img {
  max-width: 300px;
  text-align: center;
}

.sideimage {
  vertical-align: top;
  margin: 0 auto;
  background-image: url('/img.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
}

#title {
  font-size: 175%;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}

#description {
  font-size: 90%;
  padding: 0 10px;
  width: auto;
  max-height: 135px;
  box-sizing: border-box;
  overflow-y: auto;
  text-align: center;
  margin: -10px 0;
}

#linkcontainer {
  position: absolute;
  bottom: 0px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#links {
  font-size: 14px;
  color: #f7e5a3;
  padding: 5px;
  overflow: hidden;
  background: rgba(28, 28, 54, 0.70);
  border-radius: 3px;
  width: 75px;
  height: 75px;
  box-sizing: border-box;
  margin: 3px 3px 1.5px 3px;
  line-height: 200%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

以及HTML：

<div id="container">
  <div id="actualcontainer">

    <div id="content">

      <!-- start content -->

      <h1>Text text text</h1>

      <p align="center">Text text text</p>

      <!-- end content -->

    </div>

    <div id="sidebar">

      <div class="sideimage"></div>
      <div id="title">Text text text</div>

      <div id="description">
        <p>Text text text Text text text Text text text</p>
      </div>

      <div id="linkcontainer">
        <div id="links"><a href="/link"><i class="fa-solid fa-house"></i><br>link</a></div>
        <div id="links"><a href="/link"><i class="fa-solid fa-house"></i><br>link</a></div>
        <div id="links"><a href="/link"><i class="fa-solid fa-house"></i><br>link</a></div>
        <div id="links"><a href="/link"><i class="fa-solid fa-house"></i><br>link</a></div>
        <div id="links"><a href="/link"><i class="fa-solid fa-house"></i><br>link</a></div>
        <div id="links"><a href="/link"><i class="fa-solid fa-house"></i><br>link</a></div>
      </div>

    </div>

  </div>
</div>

现在发生的事情：
***在桌面上：**这将根据需要居中，没有边缘剪切或溢出窗口的边缘。
***在移动的上（纵向模式）：**也可以根据需要居中，所有内容都可以缩小/缩放以适应屏幕的边界。
***在移动的上（横向模式）：**容器突然太大，无法容纳屏幕，顶部和底部被切断。
**我希望发生的事情：***对于移动的横向模式，将受到与纵向模式相同类型的缩放 *，其中容器和屏幕边缘之间存在可见空间，并且没有任何内容被切断。
我已经试过了：
*通过CSS简单地让所有东西变小（上面的代码就是结果，东西还是被砍掉了）
*实现媒体查询，使用transform:scale(0.75);

• 使用@media (max-width: 600px)并将比例应用于#container：什么都没发生。
• 使用@media (max-height: 600px)并将比例应用于#container：容器确实变小了，但它被推到了右下角，你必须滚动才能找到它。
• 使用@media (max-width: 600px)并将比例应用于body：容器确实变小了，但是它被推到了屏幕的顶部，现在它的一半被切断了，我不能滚动到剩下的部分。
• 使用@media (max-height: 600px)并将比例应用于body：同上。