使用css3 让我的DIV层居中

时间：2017-06-22 01:15:13 阅读：170 评论：0 收藏：0 [点我收藏+]

标签：原创 2017-06-21 kaige123.com 凯哥学堂

<!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>

使用css3 让我的DIV层居中

标签：原创 2017-06-21 kaige123.com 凯哥学堂

踩

(0)

评论一句话评论（0）

凯哥学堂

加入时间：2016-10-07

关注此人发短消息

java学习视频下载：www.kaige123.com

文章分类

默认分类（3）
java（243）

“凯哥学堂”关注的人------（0）

“凯哥学堂”的粉丝们------（1）