Html 如何在固定大小的div中水平居中放置按钮？

下面是代码，一个分区中有两个按钮

<div style="position:relative; width: 300px; height: 30px; border: 1px solid;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>

如何以固定尺寸水平居中放置按钮？

<div style="position:relative; width: 300px; height: 30px; border: 1px solid;">
<div id="button_container" style="margin-left:auto; margin-right:auto;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>
</div>

试试这个：

<div style="position:relative; width: 300px; height: 30px; border: 1px solid; text-align:center;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>

---

添加

文本对齐：居中CSS到
将使按钮居中。还应该考虑从内容中分离样式，从而减少重复。比如说

CSS
HTML


编辑：状态：

text align特性描述如何对齐块容器的内联级内容

因此，它将所有内联级元素居中，是一个内联元素。
给出文本对齐：居中到您的主div&不需要使用内联css，我们应该通过外部css文件定义css类，这里我们不需要任何类型的定位，我们可以通过简单的css

**CSS**

  div {
  width: 300px; 
  height: 30px; 
  border: 1px solid; 
  text-align:center;
  }
  .button {
   width: 70px; 
   height: 30px;
  }

HTML

<div>
<input type="button" value="ok" class="button">
<input type="button" value="ok" class="button">
</div>



演示：-
您能再解释一下吗？按钮应该如何显示+1以使我理解一个新事物，但它到底是如何工作的。到目前为止，我认为它只能用于div中的文本。我已经编辑了我的答案，原因是
text align:center
works:-）
**CSS**

  div {
  width: 300px; 
  height: 30px; 
  border: 1px solid; 
  text-align:center;
  }
  .button {
   width: 70px; 
   height: 30px;
  }

<div>
<input type="button" value="ok" class="button">
<input type="button" value="ok" class="button">
</div>