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

有人能帮我解决这段愚蠢的代码吗？我花了将近2个小时试图找出如何使它工作。目标是在水平条内垂直和水平居中输入字段

下面是一个简化的代码：

HTML:

我也尝试过显示模式，改变位置类型，但没有运气

---

下面是添加一条线的高度将使其垂直居中

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

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

添加显示：块

自动边距：顶部和左侧 添加“文本对齐：居中；”=>不仅仅是对齐文本

.navigationBar{
    width:100%;
    height: 40px;
    background-color: rgb(102,102,102);
    text-align: center;
}
#searchField{
    height: 25px;
    width: 200px;
    display:inline-block;
    margin:4px auto;
}

2种方法 第二种方法实际上是使用最新的css特性，所以要小心

一,

二,

---

答案很简单，只需删除导航元素的填充，并将其高度和线条高度设置为40px，然后将display:inline块设置为搜索 导航{ 线高：40px； 高度：40px； } 搜寻{ 显示：内联块； } 试试下面的CSS：

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

#searchField{
    margin: auto;
    height: 25px;
    width: 200px;
    position:absolute;
    left:0px; right:0px; top:0px; bottom:0px;
}

PS：它不是保证金；汽车正确的语法是margin:auto

---

尝试将这一行添加到代码的其余部分。这似乎不起作用。尝试将SearchField的边距设置为0 auto我不知道投票失败的原因，但它在这里起作用：我已经设法使它起作用了。这里有一个[链接]。但是当我把它上传到服务器上时，它仍然不是垂直对齐的。负边距不是对齐的最佳方式。我在twitter网站上看到过这一点。每次你更改元素的宽度时，你也需要更改边距。随你

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

.navigationBar{
    width:100%;
    height: 40px;
    background-color: rgb(102,102,102);
    text-align: center;
}
#searchField{
    height: 25px;
    width: 200px;
    display:inline-block;
    margin:4px auto;
}

.navigationBar {    position: relative;}

 #searchField {    width: 300px;    
                   height: 100px;    
                   padding: 20px;    
                   position: absolute;
                   top: 50%;    
                   left: 50%;    
                   margin: -70px 0 0 -170px;
              }

.navigationBar {    position: relative;}

 #searchField {     position: absolute;    
                    top: 50%;    
                    left: 50%;    
                    transform: translate(-50%, -50%);
              }

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

#searchField{
    margin: auto;
    height: 25px;
    width: 200px;
    position:absolute;
    left:0px; right:0px; top:0px; bottom:0px;
}