display:flex；兼容浏览器写法

通过在 display 属性中使用这些不同的值，可以确保在各种浏览器中都能正确显示 flex 布局。

需要注意的是，这只是一个示例，实际使用时可能还需要考虑其他兼容性问题，并根据具体情况进行调整。如果你需要更全面的兼容性解决方案，建议使用 CSS 预处理器（如 Sass 或 Less）或使用相关的 CSS 库（如 Autoprefixer）来自动处理兼容性问题。

.my-element {
  display: -webkit-box; /* Safari 6-9 */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* 标准语法 */
}
.my-element {
  display: -webkit-box; /* Safari 6-9 */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* 标准语法 */
  -webkit-box-align: center; /* Safari 6-9 */
  -ms-flex-align: center; /* IE 10 */
  align-items: center; /* 标准语法 */
}
.my-element {
  display: -webkit-box; /* Safari 6-9 */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* 标准语法 */
  -webkit-box-pack: center; /* Safari 6-9 */
  -ms-flex-pack: center; /* IE 10 */
  justify-content: center; /* 标准语法 */
}