为什么align-items css在旧版本的Chrome和Firefox中不起作用？

如何解决为什么align-items css在旧版本的Chrome和Firefox中不起作用？

我创建了一个html表单，其中设置了align-items:center属性，该属性适用于新版本，但不适用于旧版本。

这是我的html

    <div class="zip-input-social input-social" >
                    <div class="zipInput-div">
                        <label for="zip">Zip:</label>
                        <input type="text" name="zip" id="zip" class="textinput formfield zipInput" maxlength="5" >
             </div>
</div>

这是我的CSS

.input-social {
    padding: 7px 0;
}
.zip-input-social {
    display: block!important;
}
.input,.input-social {
    padding: 17px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.input-social .zipInput-div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
label {
    font-family: Arial;
    font-size: 14px;
    position: absolute;
    z-index: 1;
    left: 35px;
    color: #2a2a2c;
}

我该怎么办，它也适用于旧版本

解决方法

需要更多信息，您使用的是哪个旧版本？

您可以使用caniuse网站检查浏览器与HTML和CSS功能的兼容性。

align-items。
Chrome 20或更低版本也不支持它。
Chrome版本51-21需要前缀-webkit-。

参考：https://caniuse.com/#feat=mdn-css_properties_align-items_flex_context

如果您使用的是上述版本的较新版本，我建议您提及align-items哪个元素不起作用。

如果它是标签，则因为您正在使用position: absolute而无法使用。