如何实现屏幕左右分栏：左栏文本居中，右栏动态列表居中？

我来帮你搞定这个内容居中的问题～你的代码已经实现了左右分栏，但只处理了水平居中，垂直居中的逻辑没到位，而且用float布局来做居中确实有点麻烦。推荐用Flexbox来实现，它能轻松搞定同时水平和垂直居中的需求，代码也更简洁。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>VOD</title>
  <script src='js/index.js'></script>
  <style>
    html, body { 
      height: 100%;
      margin: 0; /* 清除默认边距，避免出现不必要的滚动条 */
    }

    #mid {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: rgba(255, 255, 255, 0.5);
      display: none; /* 初始隐藏，通过JS控制显示 */
      display: flex; /* 父容器用Flex布局，让子元素自动横向排列 */
    }

    #mid1, #mid2 {
      flex: 1; /* 两个子元素平分父容器的宽度，替代原来的width:50% + float */
      display: flex; /* 子容器也用Flex，方便内部内容居中 */
      align-items: center; /* 实现垂直居中 */
      justify-content: center; /* 实现水平居中 */
      overflow: hidden; /* 保留你原来的溢出隐藏需求 */
    }
  </style>
</head>
<body>
  <div id='mid'>
    <div id="mid1">
      <h2>text1</h2>
    </div>
    <div id="mid2">
      <h2>text2</h2>
      <!-- 这里放JS动态生成的列表即可，会自动居中 -->
    </div>
  </div>
</body>
</html>

关键改动说明 #

1. 父容器#mid改用Flex布局：
   把原来的fixed定位调整为top:0; left:0; width:100%; height:100%，再加上display:flex，这样两个子div会自动横向排列，不用再依赖float。

2. 子容器#mid1和#mid2的居中逻辑：

   • 用flex:1让两个子容器平分父容器的宽度，替代手动设置width:50%。
   • 给每个子容器添加display:flex，再配合align-items:center（垂直居中）和justify-content:center（水平居中），就能让里面的内容（不管是静态文本还是JS动态生成的列表）完全居中。

3. 清除默认边距：
   给html, body加上margin:0，避免浏览器默认边距导致页面出现滚动条。

关于JS动态生成列表的示例 #

如果你的index.js里要生成列表，直接把列表元素插入#mid2即可，它会自动居中，比如：

// 假设点击按钮显示mid并生成列表
document.querySelector('#showMidBtn').addEventListener('click', function() {
  const mid = document.getElementById('mid');
  mid.style.display = 'flex';

  // 动态生成列表
  const dynamicList = document.createElement('ul');
  const listItems = ['视频1', '视频2', '视频3', '视频4'];
  
  listItems.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    dynamicList.appendChild(li);
  });

  // 替换mid2里的内容，插入动态列表
  const mid2 = document.getElementById('mid2');
  mid2.innerHTML = '';
  mid2.appendChild(dynamicList);
});

这样不管是静态文本还是动态生成的内容，都能完美在各自的分栏里水平垂直居中啦～

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