作者lueichun (no anonymous)
看板Web_Design
标题[问题] CSS的垂直、水平置中
时间Fri Oct 5 17:55:32 2018
我在网路上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不是用来设定水平方向置中而已吗？
为何在这边也会影响垂直方向置中呢？
感谢
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.167.48.218
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1538733336.A.C56.html
1F：→ peanut97: 有设宽跟高，同时又设left:0 以及right :0时,规则会有冲 10/05 18:33
2F：→ peanut97: 突，只会有left 和宽的属性有作用。 10/05 18:33
3F：→ InfinityGate: 先搞清楚top bottom right left是做什麽的吧 10/05 19:24
4F：→ InfinityGate: 这个要绝对定位就top:50% left:50% 然後transform 10/05 19:25
5F：→ InfinityGate: 然後margin只有一个参数是把上下左右都设一样的值 10/05 19:27
6F：→ InfinityGate: 只要水平居中应该是margin:0 auto; 10/05 19:28
7F：推 pkro12345: position预设是static，此时你left、top那些都没用 10/06 19:07
8F：→ pkro12345: margin:0 auto;才是水平置中而已 0是指上下margin设成0 10/06 19:09
9F：→ pkro12345: auto指根据父容器自动调整左右margin都一样，导致置中 10/06 19:10
10F：→ pkro12345: 效果，margin:auto;指根据父容器调整上下margin一样， 10/06 19:13
11F：→ pkro12345: 左右margin也一样，所以才会有水平和垂直置中的效果。 10/06 19:13
12F：→ casperz: 要不要改试height: vh100 10/07 13:08
13F：推 thethirdfoot: Flexbox 好用 10/09 23:26
14F：推 bugworld: 会用Flex真的能拯救你（拍 10/14 21:19
15F：推 kawaii98: 为什麽不用flex去设定 10/19 21:39
16F：→ bubunew: 推flex 10/30 00:13
17F：推 Haruna1998: flex会帮你自动调整喔 11/04 12:39