html - div中输入字段的垂直和水平对齐

有人可以帮我解决这段愚蠢的代码吗，在那段代码中，我花了将近2个小时才试图弄清楚它如何工作。目标是使输入栏在水平栏中垂直和水平居中。

这是一个简化的代码：

HTML：

<div class="navigationBar">
    <input type="text" id="searchField">
</div>

CSS：

.navigationBar{
    width:100%;
    height: 40px;
    background-color: rgb(102,102,102);
}

#searchField{
    margin; auto;
    height: 25px;
    width: 200px;
}

我也尝试过使用显示模式，更改位置类型，但是没有运气。

这是code

最佳答案

添加线高将使其垂直居中。

.navigationBar{
    width:100%;
    height: 40px;
    background-color: rgb(102,102,102);
}

#seachfield
    margin; 0, auto;
    height: 25px;
    line-height: 40px;
    width: 200px;
}

关于html - div中输入字段的垂直和水平对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25913155/