CSS：使用text-align：center使用display：inline-block将DIV居中

Question

是否有人对此CSS方法的合法性有任何意见，以便在父DIV中水平居中DIV（未知宽度）。内部DIV设置为'display：inline-block;'它包含的DIV使用'text-align：center;'。 'display：inline-block;'允许将DIV视为内联元素，允许'text-align：center;'采取行动。外部div只是一个演示容器。有什么意见吗？

<div style="height: 100px; width: 700px; outline: 1px dotted blue;">
  <div style="text-align: center;">
    <div style="width: 100px; height: 50px; display: inline-block; outline: 1px solid red;">
    </div>
 </div>
</div>

Answer 1

内部div中的保证金自动应解决您的问题。请尝试以下方法。

#outer-element{
   width:600px;
   padding:10px;
   display:block;
}

#inner-element{
   display:block;
   margin:10px auto;
}