js实现元素水平垂直居中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现元素水平垂直居中相关的知识,希望对你有一定的参考价值。
之前有写过css/css3实现元素的水平和垂直居中的几种方法点我,但是css3属性不是所有浏览器都能兼容的,今天写下js实现未知宽高的元素的水平和垂直居中。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ padding:50px; display: inline-block; background-color:pink; position: absolute; } </style> <script> window.onload = function(){ // 获取元素 var div = document.querySelector(‘div‘); // 设置left div.style.left=(window.innerWidth - div.offsetWidth)/2 + ‘px‘; // 设置top div.style.top= (window.innerHeight- div.offsetHeight)/2 + ‘px‘; } </script> </head> <body> <div> 陌上人如玉 <br /> 公子士无双 </div> </body> </html>
如果需要在有滚动条的情况的下要实现居中的效果,则需要加上scrollTop和scrollLeft。
以上是关于js实现元素水平垂直居中的主要内容,如果未能解决你的问题,请参考以下文章