Html 如何实现CSS效果（以内容和填充为中心）？

我想知道我怎样才能达到这个效果。首先，内容当前位于名为“contentDiv”的div中。我有以下所有的内容浮动：div的右边。我想要实现的是一个想象的边界（看看图像），其中的内容无法跨越。 然后我想让内容居中。 我如何使用CSS实现这一点？或者我可以用什么元素来复制这种效果。 我已经研究过以内容为中心，该代码适用于我-

margin-left: auto;
margin-right: auto;

#contentDivParent {
    /*It will define the imaginary border*/
    padding-left:30%;
    width:70%;
}

#contentDiv {
  /*remove the float*/
  float:none;
  /*center*/
  margin:0px auto;
  /*force line-break*/
  max-width:100%;
}