这篇文章主要介绍了CSS中的translate(-50%,-50%)实现水平垂直居中效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
translate(-50%,-50%) 属性：
向上和左，移动自身长宽的 50%，使其居于中心位置。
与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比
(使用top和left为50%时，以窗口左上角为原点)。
示例：
Document 淡入效果
效果：
到此这篇关于CSS中的translate(-50%,-50%)实现水平垂直居中效果的文章就介绍到这了,更多相关css translate水平垂直居中内容请搜索html中文网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持html中文网！
以上就是CSS中的translate(-50%,-50%)实现水平垂直居中效果的详细内容，更多请关注0133技术站其它相关文章！
