将更小的div集中在更大的div中
这个问题在这里已经有了答案：
#content_wrapper {
height: 30rem;
width: 100%;
background-color: blue;
position: relative;
margin: 0;
}
.content {
height: 30rem;
width: 80%;
background-color: green;
margin:0 auto !important;
display: block !important;
}
这将水平居中继承人一个js小提琴https://jsfiddle.net/benF/b4w2yboy/6/
删除position:absolute; 并设置display:block; 并删除margin-left: 10%; 那么它应该工作
注意，您必须为.content元素设置一个宽度，目前它是80%
HTML：
<div id="content_wrapper">
<div class="content">Your text</div>
</div>
CSS：
#content_wrapper {
background-color: green;
text-align: center;
}
.content {
background-color: red;
display: inline-block;
}