首页 > 代码库 > 使用css3 让我的DIV层居中
使用css3 让我的DIV层居中
<!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>
<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层居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。