Html 将较小的div置于较大div内

我试着四处寻找一些答案，但仍然没有找到

基本上我要做的就是把我的绿色盒子放在蓝色盒子的中间

蓝色的盒子是100%，绿色的盒子是80%，我想我应该给我的绿色盒子留一个10%的余量，但由于某种原因，它似乎不起作用

这是我所说内容的截图--

#内容包装器{
高度：30雷姆；
宽度：100%；
背景颜色：蓝色；
位置：相对位置；
保证金：0；
}
.内容{
高度：30雷姆；
宽度：80%；
背景颜色：绿色；
位置：绝对位置；
左边距：10%；
显示：内联块；
}

这将使其水平居中 这是一把小提琴

移除

位置：绝对位置和设置<代码>显示：块并删除左侧的
边距：10%那么它应该可以工作了

注意：您必须为
.content
元素设置宽度，当前它是
80%
HTML:

<div id="content_wrapper">    
    <div class="content">Your text</div>
</div>

在我看来完全居中..内容{margin:0 auto；}嘿，伙计，谢谢你的快速回复！我试着照你写的做，但没有用；我的预览看起来仍然像我在原始问题中发布的图像…：（我用一种不同的技巧更新了我的答案。希望它现在能帮助你。谢谢你花时间帮助我，伙计，但我已经解决了它，哈哈…我在CSS文件的顶部有*，正文{margin:0！重要；}，删除了它，现在我的div居中了！：）但是再次感谢！嘿，伙计，谢谢你的快速回复！我试着将你的小提琴按ctrl+c，ctrl+v组合键放到我的css文件中，但它看起来仍然像我在原始问题中发布的图像…：（还有其他css影响这两个div吗？@treadwellWell，我唯一能想到的是，我有一个html{margin:0；}在我的css文件中，你认为这和它有什么关系吗？不，我不这么认为，让我编辑我的小提琴和问题你能把你所有的代码都弄乱吗，这样我就可以更深入地了解它了，请@treadwell
<div id="content_wrapper">    
    <div class="content">Your text</div>
</div>

#content_wrapper {
  background-color: green;
  text-align: center;
}
.content {
  background-color: red;
  display: inline-block;
}