直接上代码：
方法一：
<body> <div class="tooltip"></div> </body> <style> .tooltip{ width:100px; height:100px; background:yellow; position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }方法二：
<body> <div class="tooltip"></div> </body> <style> .tooltip{ width:100px; height:100px; background:yellow; position: absolute; top:50%; left:50%; transform:translateX(-50%); transform:translateY(-50%); }效果：
当然还有更简单的方法，css3有一种flex布局，参考：阮一峰老师的文档
方法三：
<body> <div class="tooltip"></div> </body> <style> html,body{ margin:0; padding: 0; width: 100%; height: 100%; } body{ display:flex; align-items: center; /*垂直居中*/ justify-content: center; /* 水平居中*/ } .tooltip{ width:100px; height:100px; background:yellow; } </style>效果是一样的。
程序员青戈 认证博客专家 Java 架构 博客专家 Java程序员，5年一线大厂实战经验。关注我的原创微信公众号「Java学习指南」，回复「面试」可获取大厂通关面试题解一套。