Css 放大时保持整个页面（水平滚动条位置）居中

我知道如何保持元素居中，但现在我希望放大时整个页面居中（即水平滚动条应位于中间）。现在，放大时滚动条位于最左端

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
宽度：100%；
身高：100%；
保证金：0自动；
}
#p{
宽度：100%；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
}
.c1，
.c2，
.c3{
保证金：1rem；
最小宽度：15雷姆；
身高：5雷姆；
文本对齐：居中；
}
.c1{
背景色：红色；
}
.c2{
背景颜色：绿色；
}
.c3{
背景颜色：蓝色；
}

aaa
bbb
ccc

仅使用CSS是不可能的。可以考虑使用JavaScript。< /P>

const container=document.querySelector（“#p”）；
const centerEl=document.querySelector（“.center元素”）；
container.scrollLeft=centerEl.offsetLeft+centerEl.offsetWidth/2-container.offsetWidth/2
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
宽度：100%；
身高：100%；
保证金：0自动；
}
#p{
宽度：100%；
显示器：flex；
/*删除：
证明内容：周围的空间；
对齐项目：居中；
*/
overflow-x:scroll；/*已添加。这样它就不会影响整个页面*/
}
.c1，
.c2，
.c3{
保证金：1rem；
最小宽度：15雷姆；
身高：5雷姆；
文本对齐：居中；
}
.c1{
背景色：红色；
}
.c2{
背景颜色：绿色；
}
.c3{
背景颜色：蓝色；
}

aaa
bbb
ccc
仅使用CSS是不可能的。可以考虑使用JavaScript。< /P>

const container=document.querySelector（“#p”）；
const centerEl=document.querySelector（“.center元素”）；
container.scrollLeft=centerEl.offsetLeft+centerEl.offsetWidth/2-container.offsetWidth/2
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
宽度：100%；
身高：100%；
保证金：0自动；
}
#p{
宽度：100%；
显示器：flex；
/*删除：
证明内容：周围的空间；
对齐项目：居中；
*/
overflow-x:scroll；/*已添加。这样它就不会影响整个页面*/
}
.c1，
.c2，
.c3{
保证金：1rem；
最小宽度：15雷姆；
身高：5雷姆；
文本对齐：居中；
}
.c1{
背景色：红色；
}
.c2{
背景颜色：绿色；
}
.c3{
背景颜色：蓝色；
}

aaa
bbb
ccc