楼主:
lueichun (no anonymous)
2018-10-05 17:55:32我在网络上GOOGLE能够在视窗内,水平和垂直方向都置中的表单:
例如以下:
https://jsfiddle.net/lueichun/bq92w7oa/1/
一开始是<body>下一层的div(<div class="back">)
这个div的css是:
.back {
background: #e2e2e2;
width: 100%;
/* height:100%;*/
position: absolute;
top: 0;
bottom: 0;
}
这样可以让这div填满整个body。我的理解是:
将该div的position设成absolute,就可让该div的位置相对于body,
然后设定top、bottom都=0,即可让该div的位置,相对于body,顶端跟底端都是重叠的。
而设定width=100%,则让该div横跨整个body。
这样该div就和body重叠,也就填满body了。
然后设定再下一层的div(<div class="div-center">):
.div-center {
width: 600px;
height: 400px;
background-color: #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
我想说上一个div是利用position: absolute;top: 0;bottom: 0;
就能设定跟body相对的位置。
那我这边如果只单纯设定position,以及left=0、right=0等值,
该div却位在左上角,看起来right=0、bottom=0没有作用。
非得要将上margin=auto,整个div才会置中。
请问如果只是单纯设定position、left、right、top这些属性,为何在这个div就失效呢?
而且margin=auto不是用来设定水平方向置中而已吗?
为何在这边也会影响垂直方向置中呢?
感谢
position默认是static,此时你left、top那些都没用margin:0 auto;才是水平置中而已 0是指上下margin设成0auto指根据父容器自动调整左右margin都一样,导致置中效果,margin:auto;指根据父容器调整上下margin一样,左右margin也一样,所以才会有水平和垂直置中的效果。
有设宽跟高,同时又设left:0 以及right :0时,规则会有冲突,只会有left 和宽的属性有作用。
先搞清楚top bottom right left是做什么的吧这个要绝对定位就top:50% left:50% 然后transform然后margin只有一个参数是把上下左右都设一样的值只要水平居中应该是margin:0 auto;
作者:
casperz (大目)
2018-10-07 13:08:00要不要改试height: vh100
作者: bugworld 2018-10-14 21:19:00
会用Flex真的能拯救你(拍
作者:
kawaii98 (kawaii98)
2018-10-19 21:39:00为什么不用flex去设定
作者:
bubunew (牛同学)
2018-10-30 00:13:00推flex