之前有寫過css/css3實現元素的水平和垂直居中的幾種方法點我,但是css3屬性不是所有瀏覽器都能相容的,今天寫下js實現未知寬高的元素的水平和垂直居中。 如果需要在有滾動條的情況的下要實現居中的效果,則需要加上scrollTop和scrollLeft。 ...
之前有寫過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。