Css 自动留有额外空间的边距

有没有一种方法可以使页面中的元素水平居中，并使用自动边距，但如果视口变小，则可以使元素左右移动100px，这样就可以这样：

margin: 0 auto;
margin-left:100px;
margin-right:100px;

---

或者我需要为此使用父容器吗？

您可以为此使用填充您可以使用

左边框

和

右边框

向元素的左侧和右侧添加边框。确保将边框颜色设置为透明，并添加背景剪辑：填充框以确保边框确实不可见：

.centered{
保证金：0自动；
宽度：100px；
高度：100px；
背景：蓝色；
背景剪辑：填充框；
左边框：100px实心透明；
右边框：100px实心透明；
}

---

自动

的问题是您甚至不能将其与
计算（自动+100px）

最好、最准确的方法是使用flex

justify content
属性将使元素居中，如
margin:0 auto
你还有一个房间可以玩
margin


.parent{
高度：200px；
背景：灰色；
显示器：flex；
对齐内容：中心；/*中心元素*/
}
.孩子{
高度：100px；
宽度：200px；
背景：黄色；
保证金：0 100px；/*增加保证金*/
}

我会使用
@媒体
查询。测试屏幕是否低于某个宽度，然后更改边距。这是否回答了您的问题？