Html 将div居中，但保持网格状布局

我已经做了一个网格状的模式与9张图片，并希望中心的9张图片作为一个整体。我实现了带边距的网格状结构。我遇到的问题是，当我执行

margin:auto

和

width:100%

时，它们再次成为

block

元素，而不是像以前那样的

inline block

元素

以下是我想要居中显示的代码：（单击“全页”查看网格状布局）

.content{
宽度：100%；
}
.titletext{
边际：0px；
填充：0px；
}
.头衔{
字体系列：“Fjalla One”；
文本对齐：居中；
颜色：#560606；
字体大小：100px；
利润率：10px 50px；
}
.副标题{
字体系列：“Fjalla One”；
文本对齐：居中；
颜色：#BF1C1C；
字体大小：40px；
保证金：5px50px
}
.左角{
宽度：180px；
高度：55px；
位置：相对位置；
左：10px；
字体系列：lato；
字体大小：20px；
颜色：#A81C1C；
顶部：-10px；
}
标题
.副标题{
位置：相对位置；
顶部：-80px；
}
.右角{
宽度：400px；
高度：55px；
位置：绝对位置；
右：10px；
字体系列：lato；
字体大小：20px；
颜色：#A81C1C；
顶部：355px；
浮动：对；
文本对齐：右对齐；
}
.产品{
位置：绝对位置；
}
.图像{
宽度：225px；
身高：225px；
利润率：0px 150px；
边框：13px实心#390404；
边界半径：20px；
}
.草莓奶油，
瓦尼拉先生，
.绿灯，
.originalchoc，
独角兽
.americafresh先生，
.山羊，
.酪乳，
奥利奥先生{
显示：内联块；
文本对齐：居中；
}
.绿灯，
.americafresh先生，
奥利奥先生{
右边距：0px；
}
.草莓奶油，
.山羊，
.originalchoc{
左边距：0px；
}
.潜台词{
字体大小：30px；
字体系列：“Lato”；
颜色：#560606；
边缘底部：-15px；
边缘顶部：5px；
}
.价格{
字体大小：20px；
字体系列：“Lato”；
颜色：#900B0B；
边缘底部：80px；
}

纸杯蛋糕
适合家庭小吃和派对
*所有价格都以打为单位列出
纸杯蛋糕
我们精选的手工制作的纸杯蛋糕！
草莓奶油

24.99美元
香草的喜悦
16.99美元
绿灯
27.99美元
原版Choc'
16.99美元
独角兽

27.99美元
美国新鲜
24.99美元
G.O.A.T
29.99美元
酪乳
19.99美元
奥利奥

26.99美元

这就是你要找的吗？当屏幕达到一定大小时，您可以添加媒体查询以更改框的宽度

.content{
宽度：100%；
}
.titletext{
边际：0px；
填充：0px；
显示：块；
}
.头衔{
字体系列：“Fjalla One”；
文本对齐：居中；
颜色：#560606；
字体大小：100px；
利润率：10px 50px；
}
.副标题{
字体系列：“Fjalla One”；
文本对齐：居中；
颜色：#BF1C1C；
字体大小：40px；
保证金：5px50px
}
.左角{
宽度：180px；
高度：55px；
位置：相对位置；
左：10px；
字体系列：lato；
字体大小：20px；
颜色：#A81C1C；
顶部：-10px；
}
标题
.副标题{
位置：相对位置；
顶部：-80px；
}
.右角{
宽度：400px；
高度：55px；
位置：绝对位置；
右：10px；
字体系列：lato；
字体大小：20px；
颜色：#A81C1C；
顶部：200px；
文本对齐：右对齐；
}
.产品{
位置：绝对位置；
}
.图像{
宽度：225px；
身高：225px；
边框：13px实心#390404；
边界半径：20px；
}
.草莓奶油，
瓦尼拉先生，
.绿灯，
.originalchoc，
独角兽
.americafresh先生，
.山羊，
.酪乳，
奥利奥先生{
显示：内联块；
文本对齐：居中；
}
.绿灯，
.americafresh先生，
奥利奥先生{
右边距：0px；
}
.草莓奶油，
.山羊，
.originalchoc{
左边距：0px；
}
.潜台词{
字体大小：30px；
字体系列：“Lato”；
颜色：#560606；
边缘底部：-15px；
边缘顶部：5px；
}
.价格{
字体大小：20px；
字体系列：“Lato”；
颜色：#900B0B；
边缘底部：80px；
}
.盒子{
宽度：33%；
文本对齐：居中；
}

纸杯蛋糕
适合家庭小吃和派对
*所有价格都以打为单位列出
纸杯蛋糕
我们精选的手工制作的纸杯蛋糕！
草莓奶油

24.99美元
香草的喜悦
16.99美元
绿灯
27.99美元
原版Choc'
16.99美元
独角兽

27.99美元
美国新鲜
24.99美元
G.O.A.T
29.99美元
酪乳
19.99美元
奥利奥

26.99美元