你的位置:首页 > 软件开发 > Java > js实现元素水平垂直居中

js实现元素水平垂直居中

发布时间:2017-11-26 01:00:02
只有有写过css/css3实现元素的水平和垂直居中的几种方 ><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></ ...

只有有写过css/css3实现元素的水平和垂直居中的几种方 ><!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实现元素水平垂直居中

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。