如何实现CSS效果（居中放置内容和填充）？

Question

我想知道如何实现这种效果。 首先，当前内容位于名为“ contentDiv”的div中。 我有以下所有内容float：div的权利。 我要实现的是一个假想的边界（看图片），其中内容不能交叉。 然后，我希望内容居中。 如何使用CSS来实现？ 或者我可以使用哪些元素来复制这种效果。 我已经研究过将内容居中，并且此代码对我有用-

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

Answer 1

#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%;
}