Javascript Div垂直对齐不适用于Chrome-适用于其他浏览器

修复了一些现有代码，两个div在Firefix/IE上对齐正常，但在Chrome上没有。 曾尝试过使用填充物，但将其固定在铬合金上，然后在其他地方断裂。 请给我一个简单的忽略设置，我似乎几天都无法修复。 代码：（在firefox上运行良好，在chrome上运行不太好） 有解决这个问题的方法吗

* {
框大小：边框框；
}
主体{}
.自动完成{
/*容器必须相对以下位置放置：*/
位置：相对位置；
显示：内联块；
}
@介质（最大宽度：680px）{
.自动完成{
/*容器必须相对以下位置放置：*/
位置：相对位置；
显示：内联块；
宽度：70%！重要；
}
}
输入{
边框：20px实心透明；
左边框：0px实心透明；
背景色：#f1f1；
字体大小：24px；
边界半径：25px 1px 1px 25px；
显示：内联块；
}
@介质（最大宽度：680px）{
输入[类型=文本]{
边框：20px实心透明；
左边框：0px实心透明；
背景色：#f1f1；
左边距：0px；
字体大小：14px；
边界半径：25px 1px 1px 25px；
显示：内联块；
}
输入[type=submit]{}
}
输入[类型=文本]{
背景色：#F4F7FA；
宽度：100%；
边框：21px实心透明；
右边框：0px实心透明；
}
输入[类型=提交]{
背景色：#ef7023；
颜色：#fff；
光标：指针；
边界半径：1px25px25px1px；
宽度：30%；
身高：100%！重要；
}

对于

内联块

元素，应将

顶部填充

和

底部填充

添加到元素中以进行垂直对齐

将此添加到css中：

form {
  padding-top: 50px;
  padding-bottom: 50px;
}

我设置了值

50px

，但您可以自己设置合适的值

同时从主

div

中删除

padding top:60px

* {
框大小：边框框；
}
主体{}
.自动完成{
/*容器必须相对以下位置放置：*/
位置：相对位置；
显示：内联块；
}
@介质（最大宽度：680px）{
.自动完成{
/*容器必须相对以下位置放置：*/
位置：相对位置；
显示：内联块；
宽度：70%！重要；
}
}
输入{
边框：21px实心透明；
左边框：0px实心透明；
背景色：#f1f1；
字号：17px；
边界半径：25px 1px 1px 25px；
显示：内联块；
}
@介质（最大宽度：680px）{
输入[类型=文本]{
边框：20px实心透明；
左边框：0px实心透明；
背景色：#f1f1；
左边距：0px；
字体大小：14px；
边界半径：25px 1px 1px 25px；
显示：内联块；
}
输入[type=submit]{}
}
输入[类型=文本]{
背景色：#F4F7FA；
宽度：100%；
边框：21px实心透明；
右边框：0px实心透明；
}
输入[类型=提交]{
背景色：#ef7023；
颜色：#fff；
光标：指针；
边界半径：1px25px25px1px；
宽度：30%；
身高：100%！重要；
}
形式{
填充顶部：50px；
填充底部：50px；
右：15%；
左：15%；
}

如果您想获得理想的垂直对齐方式，请尝试flex box

.parent{
显示器：flex；
高度：500px；
背景#666666；
}
.儿童{
背景：#C5C5；
高度：100px；
宽度：100px；
利润率：10px；
}
.子女：第n名子女（1）{
自对准：居中；
}

居中的
不居中

代码链接：我在chrome中的结果与firefoxTry中相同，使用

float

而不是

inline block

：firefox中也有问题。我写了一个答案作为答案。.V.SAMBOR，我应该在桌面上提到，也许你检查了手机？当我运行你的片段，他们似乎没有对齐？如果你考虑灰色区域，输入垂直对齐。您可以增加或减少

顶部填充

和

底部填充

，以获得适当的结果。