JS代码怎么让文字垂直居中？

JavaScript027

JS代码怎么让文字垂直居中？,第1张

JS代码让文字垂直居中的方法

水平居中方法： 将浏览器可视区的宽度(clientWidth) -减去 要居中元素本身的宽度(offsetWidth) /除以 2 +'px'

垂直居中方法： 将浏览器可视区的高度(clientHeight) -减去 要居中元素本身的高度(offsetHeight) /除以 2 +'px'

window.onload = function() {

var oMain = document.querySelector('#pop-main')

oMain.style.left = (document.documentElement.clientWidth - oMain.offsetWidth) / 2 +'px'

oMain.style.top = (document.documentElement.clientHeight - oMain.offsetHeight) / 2 +'px'

}

js代码

JS即Javascript，Javascript是一种由Netscape的LiveScript发展而来的脚本语言，主要目的是为了解决服务器终端语言，比如Perl，遗留的速度问题。

当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

1. 兼容性问题：getElementsByClassName 在IE不支持

2. offsetHeight，scrollHeight，clientHeight , style.height, height 属性都要考虑

3. 垂直居中：left + top + height + 窗口参照 决定

图片水平垂直居中情况很多，最简单的办法是吧图片设置为背景，给背景设置background-position:center

如果只能用图片

分两种情况：

1.图片宽高固定，这种情况很简单。

水平居中：就在图片的css中加 dispaly:blockmargin:0 auto

垂直居中：自己算出（div的高度-图片的高度）/2，得到margin-top值即可。

2.图片高度未知，这个布局比较难实现。一般我是用js做的。

水平居中：同上，在图片的css中加 dispaly:blockmargin:0 auto

垂直居中：用js算出（div的高度-图片的高度）/2，得到margin-top值赋给它。

曾经研究过网上的很多方法，个人觉得这个是最有效的了。