我有以下代码。我有一个搜索，我想在页面中居中。但由于某种原因它不起作用。
搜索
<body>
<div>
<h1>ADD BUTTON HERE</h1>
</div>
<div class="box">
<input type="search" id="search" placeholder="Search" />
</div>
<hr>
</body>
<html>
我也有以下css
.box{
width: 100%;
}
#search {
margin: 0 auto;
display: inline-block;
}
我已经阅读了许多关于此的帖子，所有这些帖子都可以做，margin: 0 auto;但那是行不通的。有什么我在这里想念的吗？
只需将框内的任何内容居中即可，这样搜索字段也会居中。
.box{
width: 100%;
text-align:center;
}<div>
<h1>ADD BUTTON HERE</h1>
</div>
<div class="box">
<input type="search" id="search" placeholder="Search" />
</div>
<hr>