flex布局
利用css3的新属性flex可以轻松实现垂直居中,具体方法,看下图代码:
绝对定位(position)+transform
利用绝对定位(position)+transform也可以实现垂直居中,具体实现,看下图代码:
效果图:
总结:
以上两种方法,都可以实现垂直居中,但是css3新属性存在兼容性问题,如果不考虑兼容性的话,完全可以直接使用;如果考虑兼容性,可以使用其他css方式。
如有疑问,欢迎在评论下方留言讨论;喜欢的记得点赞+关注,为大家提供专业的前端知识
首页 >
利用css3的新属性flex可以轻松实现垂直居中,具体方法,看下图代码:
利用绝对定位(position)+transform也可以实现垂直居中,具体实现,看下图代码:
效果图:
总结:
以上两种方法,都可以实现垂直居中,但是css3新属性存在兼容性问题,如果不考虑兼容性的话,完全可以直接使用;如果考虑兼容性,可以使用其他css方式。
如有疑问,欢迎在评论下方留言讨论;喜欢的记得点赞+关注,为大家提供专业的前端知识