通過(guò)JavaScript使Div居中并隨網(wǎng)頁(yè)大小改變而改變

2019-11-20 22:37:45

字體：大中小

供稿：網(wǎng)友

在使用Java做后臺(tái)的時(shí)候，都會(huì)做到登錄的頁(yè)面，但是自己的頁(yè)面太難看了，要居中沒(méi)居中，要顏色沒(méi)顏色，但是無(wú)論是怎么樣都得使登錄的框居中吧！以前的想法是通過(guò)CSS+Div使div居中，但是現(xiàn)在的想法變了，通過(guò)JavaScript可以簡(jiǎn)單的使Div在頁(yè)面上居中，隨著網(wǎng)頁(yè)大小的改變做出相應(yīng)的改變。而且只要明白了居中的原理輕而易舉的就可以實(shí)現(xiàn)了。
先看一下居中的原理吧!
先看一張圖。

從圖中看到了什么？可以看到紅色的框居中了，為什么會(huì)居中呢？通過(guò)觀察可以發(fā)現(xiàn)紅框的上下的藍(lán)色的間距線是一樣長(zhǎng)的，這樣可以確保了垂直居中，紅框的左右的綠色間距線也是一樣長(zhǎng)的，這樣可以確保了水平居中。
但是怎么使上下的間距相等呢？左右的間距相等呢？
在看一張圖：

假設(shè)當(dāng)前網(wǎng)頁(yè)的高為350px，寬為400px，而紅框的高為150px，寬為200px，我們可以發(fā)現(xiàn)網(wǎng)頁(yè)的高減去紅框元素的高得到200px像素，而這200px像素正是上下邊距的總和，上下邊距各得到了100px，同理，左右也是一樣的。
有沒(méi)有感覺(jué)到什么？
如果我們知道了網(wǎng)頁(yè)元素的高或?qū)挘瑴p去元素的高或?qū)挘缓笤诔?，就得到了上下左右邊距的距離。我們通常給元素的定位是怎么定的呢？不都是通過(guò)top和left的坐標(biāo)定的嗎？那么現(xiàn)在紅框的坐標(biāo)是什么呢？
再看一張圖：

麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

通過(guò)JavaScript使Div居中并隨網(wǎng)頁(yè)大小改變而改變