四种实现垂直居中的CSS方法
想要快速实现垂直居中？可以试试这几种方法，真的挺实用的！最常见的就是利用position: absolute来定位元素，配合 top: 50%和 transform: translateY(-50%)，居中效果相当不错。
另外，如果你偏好更现代的方式，可以尝试display: flex，只需要设置容器为 flex 布局，再加上align-items: center，这样子就能轻松搞定垂直居中了，响应也蛮快的。
还有一种方法，就是display: table-cell，把父元素设置成 table 布局，子元素设置 vertical-align: middle，同样能够实现垂直居中的效果，比较适用于需要兼容老浏览器的场景。
其实，不同的需求可以选择不同的方式，如果你在做响应式网页设计，display: flex还是最推荐的，毕竟兼容性和灵活性都挺高的。
文件大小：1.13KB
评论区