凯哥学堂

标题: HTML5 让我的DIV层居中 [打印本页]

作者: 可可 时间: 2017-8-24 19:33
标题: HTML5 让我的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>

欢迎光临凯哥学堂 (http://kaige123.com/)