如何让宽度大于浏览器窗口宽度的页面在100%显示的条件下居中显示

要让宽度超过浏览器窗口的页面在保持100%宽度的同时居中显示，你可以采用CSS布局技术。以下是一种常见的方法：

1. 使用Flexbox布局：
在父容器上设置`display: flex; justify-content: center; align-items: center;`。这样，无论容器大小，内容都会水平和垂直居中。

.parent-container {
   display: flex;
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   height: 100vh; /* 或者指定一个固定高度 */
}

2. 使用Grid布局：
如果你的页面更适合网格结构，可以使用`grid-template-columns: 1fr auto-fit;`来创建自适应列，并利用`place-items: center;`来居中内容。

.parent-container {
   display: grid;
   place-items: center; /* 居中 */
   width: 100%;
   height: 100vh; /* 或者指定一个固定高度 */
}

确保`.parent-container`的宽度设置为`100%`，以便页面能填充整个浏览器窗口。