Html CSS display:table-如何使用display:table将两个单元格排列在另一个DIV的中心？

我有一个包含两个单元格的表div。我希望单元格水平地相互接触，并且在每一侧有一个相等的边框（显示在外部DIV的中心）。有什么办法我可以做到这一点吗

试验
一个

我现在看到的是测试一出现在左边，但我需要它在中间

---

也许你是这样写的：

<div id='hdr_msg' style='display: table; border: 1px solid red; width: 200px;'>
   <div id='hdr_txt' style="display: table;margin:0 auto">
      <div id="hdr_msg1" style='display: table-cell; border: 1px solid blue;'>Test</div>
      <div id="hdr_msg2" style='display: table-cell; border: 1px solid green;'>One</div>
   </div>
  </div>

试验
一个

检查此项

欲了解更多信息，请查看《史蒂文理论》