[問題] CSS的垂直、水平置中
我在網路上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://www.ptt.cc/bbs/Web_Design/M.1538733336.A.C56.html
→
10/05 18:33,
5年前
, 1F
10/05 18:33, 1F
→
10/05 18:33,
5年前
, 2F
10/05 18:33, 2F
→
10/05 19:24,
5年前
, 3F
10/05 19:24, 3F
→
10/05 19:25,
5年前
, 4F
10/05 19:25, 4F
→
10/05 19:27,
5年前
, 5F
10/05 19:27, 5F
→
10/05 19:28,
5年前
, 6F
10/05 19:28, 6F
推
10/06 19:07,
5年前
, 7F
10/06 19:07, 7F
→
10/06 19:09,
5年前
, 8F
10/06 19:09, 8F
→
10/06 19:10,
5年前
, 9F
10/06 19:10, 9F
→
10/06 19:13,
5年前
, 10F
10/06 19:13, 10F
→
10/06 19:13,
5年前
, 11F
10/06 19:13, 11F
→
10/07 13:08,
5年前
, 12F
10/07 13:08, 12F
推
10/09 23:26,
5年前
, 13F
10/09 23:26, 13F
推
10/14 21:19,
5年前
, 14F
10/14 21:19, 14F
推
10/19 21:39,
5年前
, 15F
10/19 21:39, 15F
→
10/30 00:13,
5年前
, 16F
10/30 00:13, 16F
推
11/04 12:39,
5年前
, 17F
11/04 12:39, 17F