如何实现一个响应式布局，使得在不同屏幕尺寸下，页面的主内容区域始终居中且宽度不超过1200px？

如何实现一个响应式布局，使得在不同屏幕尺寸下，页面的主内容区域始终居中且宽度不超过1200px？

回答： 可以使用CSS的Flexbox或Grid布局结合媒体查询来实现。以下是使用Flexbox的解决方案：

.container {
  display: flex;
  justify-content: center;
  padding: 0 20px;
  min-height: 100vh;
}

.content {
  width: 100%;
  max-width: 1200px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

<div class="container">
  <div class="content">
    <!-- 主内容 -->
  </div>
</div>

解析：

1. 使用display: flex和justify-content: center让内容水平居中
2. max-width: 1200px确保内容区最大宽度为1200px
3. width: 100%配合padding: 0 20px实现移动端适配，自动填充父容器
4. 在小屏幕下会自动占满可用宽度，大屏幕下居中显示且不超过1200px
5. 这种方案无需媒体查询即可实现基本响应式效果，简洁高效