div中的div在父容器中水平居中或者垂直居中

在我们平时开发中会遇到一个问题，比如页面宽度和高度都要适合浏览器的高度和宽度，也就是自适应

比如

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水平居中

posted on 2018-03-26 23:36  缘在此季  阅读(1327)  评论(0)  编辑  收藏  举报

导航