当你使用Java作为背景时,你总是会登录页面,但是你自己的页面太丑了,所以你应该居中,没有颜色,但是无论如何,你都必须将登录框居中!过去的想法是通过CSS Div将Div居中,但现在想法变了。JavaScript可以简单地将div放在页面的中心,并随着页面大小的变化进行相应的更改。而且只要你明白对中的原理,你就很容易做到。我们来看看定心原理!先看图。
你在图片中看到了什么?你可以看到红色的盒子是居中的。为什么居中?通过观察可以发现,红框的上下蓝色间距线长度相同,保证了垂直对中,红框的左右绿色间距线长度也相同,保证了水平对中。但是如何让上下的距离相等呢?左右间距相等?看图:。
假设当前网页的高度为350px,宽度为400px,而红框的高度为150px,宽度为200px,我们可以发现网页的高度减去红框元素的高度得到200px像素,这是上下页边距之和,上下页边距各得到100px。同样,左右也是一样的。你有什么感觉吗?如果我们知道网页元素的高度或宽度,减去元素的高度或宽度,然后除以2,得到上下左右边距之间的距离。我们通常如何定位元素?不都是由上左坐标决定的吗?那么现在红盒子的坐标是什么?再看另一张照片:
红框的坐标是蓝色的上面一行100px和绿色的左边一行100px,也就是左边和上边的值。这两个数值不是计算出来的吗?可以总结出一个公式:居中元素的顶部=(网页高度-元素高度)/2;居中元素的左边=(网页宽度-元素宽度)/2;转换成JavaScript的语法是:top=(document . body . client height-element . offsetheight)/2;左=(文档。尸体。client width-元素。偏移)/2顶部和左侧的坐标不居中。下面是对中的完整代码:在这里,我们要注意几个问题。我们应该将元素位置的属性设置为absolute,也就是绝对定位,然后添加onload和onresize两个事件。要添加px的字符串,offsetHeight是获取元素本身的高度,offsetWidth是获取元素本身的宽度,也就是网页加载和大小改变时div会居中。然而,这种方法是将元素和网页居中。如果希望一个元素位于另一个元素的中心,原理是一样的。我们只需要将网页的宽度和高度代码更改为另一个元素的宽度和高度代码。另一个元素的宽度和高度可以通过获取当前元素的父元素的高度和宽度来获得。也可以居中。如果使用jquery的框架,代码会更简单。请指出来源。