Html 将文本框居中与图像和其他文本框对齐

在我的

styles.css中，我遇到了一个似乎无法克服的障碍。我正在创建一个谷歌主页，由于某些原因，无法使搜索栏在页面中居中

我试过做
margin:auto0，
左边框：200px，
文本对齐：居中
，但搜索栏不会移动（我将其放在
.searchbar.search
中）


.googlelogo{
显示：块；
保证金：0自动；
边缘顶部：150px；
}
.导航{
显示器：flex；
证明内容：之间的空间；
}
.导航a{
文字装饰：无；
颜色：#6969；
}
.导航.导航左.大约，
.nav.nav right.gmail{
填充：10px；
}
.搜索栏.搜索{
边界半径：20px；
高度：30px；
宽度：400px；
}
.搜索按钮{
文本对齐：居中；
}
.按钮{
浮动：中心；
背景色：#F2F2；
边框：1px实心#e4；
边界半径：2px；
颜色：#5959；
字体大小：11px；
字体大小：粗体；
填充：6px 5px；
右边距：6.5px；
左边距：6.5px；
}
.页脚{
显示器：flex；
柔性流：行；
证明内容：之间的空间；
背景色：#F2F2；
填充：15px；
边缘顶部：240px；
宽度：98%；
}
.页脚a{
文字装饰：无；
颜色：#6969；
}
.footer.footer left.广告，
.footer.footer left.business，
.footer.footer left.如何搜索{
利润率：0.10px；
}
.footer.footer right.隐私，
.footer.footer right.terms，
.footer.footer right.settings{
利润率：0.10px；
}

谷歌
谷歌搜索
手气不错
添加了这个

.searchbar{
显示器：flex；
证明内容：中心；
垫底：1米；
}


.googlelogo{
显示：块；
保证金：0自动；
边缘顶部：150px；
}
.导航{
显示器：flex；
证明内容：之间的空间；
}
.导航a{
文字装饰：无；
颜色：#6969；
}
.导航.导航左.大约，
.nav.nav right.gmail{
填充：10px；
}
.搜索栏{
显示器：flex；
证明内容：中心；
垫底：1米；
}
.搜索栏.搜索{
边界半径：20px；
高度：30px；
宽度：400px；
}
.搜索按钮{
文本对齐：居中；
}
.按钮{
浮动：中心；
背景色：#F2F2；
边框：1px实心#e4；
边界半径：2px；
颜色：#5959；
字体大小：11px；
字体大小：粗体；
填充：6px 5px；
右边距：6.5px；
左边距：6.5px；
}
.页脚{
显示器：flex；
柔性流：行；
证明内容：之间的空间；
背景色：#F2F2；
填充：15px；
边缘顶部：240px；
宽度：98%；
}
.页脚a{
文字装饰：无；
颜色：#6969；
}
.footer.footer left.广告，
.footer.footer left.business，
.footer.footer left.如何搜索{
利润率：0.10px；
}
.footer.footer right.隐私，
.footer.footer right.terms，
.footer.footer right.settings{
利润率：0.10px；
}

谷歌
谷歌搜索
手气不错

哦，我想我是在修改输入类，而不是实际的表单。谢谢我假设要将框向上移动，我必须在表单中添加一个填充？是的，您可以将
表单
视为
div
，并将其设置为与设置
div
样式相同的样式。或者，您可以打开
表单
标记，进一步向上扩展节点链，并在其中嵌套一堆
div
s。无论哪种方法都可以。表单的默认
显示
模式为
块
，与
div
相同，因此可以对其进行类似的样式设置。
 <div class='searchbar'>
    <form style="text-align: center">
      <input class='search' type='text'>
    </form>
  </div>