代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>凯哥学堂小例题</title>
</head>
<style type="text/css">
/*此样式设置的全频透明div*/
div { position: absolute; z-index: 1;
width: 100%;/*按body的可用宽度 按%比的好处就是可以随着窗口大小而改变 */
height: 100%;/*按body的可用高度*/
left: 0%; top: 0%; background-color: #000000; opacity: 0.3; }
div div{ position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; transform: translate(-50%,-50%); /*这里的作用很大
主要就是设置好DIV后 会按照50% 50%方式坐标设置
这样就忘记减去div的高度和宽度了
显示的效果就没有在中间
应该平移窗口的-50% 相当于宽度或高度除以2*/
background-color: white; opacity: 1; }
div div p{ line-height: 200px; text-align: center; color: red; opacity: 1; font-size: 50px;
}
</style>
<body>
<div>
<div>
<p>凯哥学堂</p>
</div>
</div>
</body>
</html>