在我们平时开发中会遇到一个问题，比如页面宽度和高度都要适合浏览器的高度和宽度，也就是自适应
比如
1 <div style="width:100%;height:100%;"> 2 <div>我们想叫这个div水平居中</div> 3 </div>
那我们首先要知道div是块级元素，想叫他水平居中我们这样设置他的三个样式就可以了： position：absolute；left：50%；transform：translate（-50%，0）；
对就是这三个样式就搞定了
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 html,body,div{ 8 height: 100%; 9 width: 100%; 10 } 11 </style> 12 </head> 13 <body> 14 <div style="background-color: blue;"> 15 <div style="background-color: red;position: absolute;left: 50%;transform: translate(-50%,50px);width: 500px;height: 500px;"> 16 </div> 17 </div> 18 </body> 19 </html>
完事的效果就是下面的样子
好了，就说到这里
2018,6.3 补充一下，div水平居中的样式
*{margin:0px;padding:0px} .div{margin:0 5%}
不要设置div的高度和宽度，这样很简短的一句话就能搞定div水平居中
扫一扫
782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
