CSS 中的水平和垂直居中

如果您像我一样，那么在您的职业生涯中，垂直和水平居中 HTML 元素曾经一度成为您的困扰。

幸运的是，这个解决方案适用于所有浏览器，甚至是 IE 11：

display: flex;
justify-content: center;
align-items: center;

justify-content默认为水平对齐。删除或设置justify-content: flex-start;会将子元素置于 左侧。设置justify-content: flex-end;会将子元素置于右侧。

align-items默认为垂直对齐。删除或设置align-items: flex-start;会将子元素置于 顶部。设置align-items: flex-end;会将子元素置于底部。

这是一个例子。

您或许可以停止使用padding、absolute左/右和上/下定位float、、、line-height以及transform任何其他技巧:)