如何让居中容器Div适配移动端横屏显示？

当前有一个居中布局的Div容器，相关CSS及HTML代码如下：

CSS代码 #

#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)：
  • 为#container应用@media (max-width: 600px)：无效果。
  • 为#container应用@media (max-height: 600px)：容器缩小但偏移至右下角，需滚动查看。
  • 为body应用@media (max-width: 600px)：容器缩小但偏移至顶部，部分内容裁切且无法滚动查看。
  • 为body应用@media (max-height: 600px)：效果与上述一致。

解决方案 #

核心问题是容器使用固定高度、内容区域固定宽度，且绝对定位+缩放的组合破坏了居中逻辑。以下是针对性修复：

1. 限制容器的最大尺寸 #

将#container的固定高度改为视口相对的最大高度，同时限制最大宽度，确保容器不会超出屏幕范围：

#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90vh; /* 留10vh的上下间距 */
  height: auto;
  max-width: 90vw; /* 留10vw的左右间距 */
  width: auto;
  background: rgba(28, 28, 54, 0.70);
  padding: 15px;
  border: 1px solid #1c1d29;
  border-radius: 3px;
  display: flex;
  overflow: auto; /* 容器内部超出时允许滚动 */
}

2. 适配内容区域宽度 #

把#content的固定宽度改为最大宽度，确保在小屏幕下能自适应容器：

#content {
  max-width: 550px;
  width: 100%;
  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;
}

3. 优化侧边栏布局（可选） #

小屏幕下侧边栏固定宽度会占用过多空间，添加媒体查询切换为垂直布局：

@media (max-width: 768px) {
  #actualcontainer {
    flex-direction: column;
  }
  #sidebar {
    width: 100%;
    padding-left: 0;
    padding-top: 20px;
  }
}

4. 修复链接容器定位 #

将#linkcontainer的绝对定位改为弹性布局的自动填充，避免容器高度变化时错位：

#linkcontainer {
  margin-top: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 10px;
}

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

内容的提问来源于stack exchange，提问作者user21339086