css设置水平垂直居中
前端开发中常常需要对某个元素进行设置水平垂直居中，可以通过使用css3提供的transform的translate进行元素居中效果。
可以直接看最后一步，里面包含了所有html代码，可直接使用。
操作方法
（01）新建一个html文件，然后创建一个<div>标签，然后给这个标签设置一个class，案例中class为test代码：<div class="test">div元素水平垂直居中 </div>
（02）使用transform与position设置给test类设置元素垂直水平居中
（03）保存html代码文件后使用浏览器打开，即可在浏览器上看到div元素水平垂直居中
（04）页面所有代码。可以直接复制所有代码，粘贴到新建html文件，保存后打开即可看到效果。所有代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>{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>
