代码:
<!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>
分享到:
相关推荐
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学div+css的朋友有启发。
CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
DIV+CSS 图片垂直居中效果
NULL 博文链接:https://javapub.iteye.com/blog/709361
如何让DIV居中,这里有源代码。 许多朋友都不清楚DIV如何让它居中,其实很简单! 如果是对页面所有DIV居中,就写在BODY的CSS中; 如果是针对特定的DIV,就写在该DIV的CSS中
DIV+CSS上下左右绝对居中
CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
js+CSS实现弹出居中背景半透明div层的方法.docx
首先还是那句老话,非常幸运我们现在可以使用CSS3布局。 在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直...
JS+CSS 控制Img在div中居中显示一部分
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
css3块元素居中 css3中块元素居中是前端开发中常见的问题,块元素可以分为定宽块元素、不定宽块元素和多行文本、图片、块状元素的竖直居中等情况。...css3块元素居中可以根据不同的情况使用不同的解决方法。
DIV始终居中的半透明弹出层.rarDIV始终居中的半透明弹出层.rarDIV始终居中的半透明弹出层.rar
CSS解决 DIV 3列居中难题 .pdf
NULL 博文链接:https://zhouyao.iteye.com/blog/417432
CSS+DIV设计实例:实现让多个DIV排列时居中.txt
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
css:可以令层中层上下左右居中。(即:div之中的div的文本,上下左右居中显示)
不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一、margin:auto 0 与 text-aligh:center 在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现...