操作方法
新建一个html文件，然后创建一个<div>标签，然后给这个标签设置一个class，案例中class为test 代码： <div class="test">div元素水平垂直居中 </div>
使用transform与position设置给test类设置元素垂直水平居中
保存html代码文件后使用浏览器打开，即可在浏览器上看到div元素水平垂直居中
页面所有代码。可以直接复制所有代码，粘贴到新建html文件，保存后打开即可看到效果。 所有代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .test{ width : 300px; height : 200px; background-color: #ddd; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="test">div元素水平垂直居中 </div> </body> </html>