利用jquery讓元素居中

利用jquery 讓元素居中

一、

html頁面**

//前提需要頁面中引入了jquery.js 物件

//計算left //

當前視窗寬度

var ndivleft = $(window).width();

//整體寬度減去當前元素的寬度

ndivleft = ndivleft - parseint(ediv.offsetwidth);

//計算中間位置

ndivleft = ndivleft/2;

//當前元素是展示在螢幕中間的，加上滾動條滾動的距離

ndivleft = ndivleft + $(document).scrollleft();

//設定物件的left 座標

$.style(ediv,"left",ndivleft);

//計算top, 原理與上邊的原理一致

var ndivtop = $(window).height();

ndivtop = ndivtop - parseint(ediv.offsetheight);

ndivtop = ndivtop/2;

ndivtop = ndivtop + $(document).scrolltop();

$.style(ediv,"top",ndivtop);

計算原理：

1)

left的位置計算

a) 獲取當前視窗（window 的可是區域）的寬度 b)

計算當前物件在該視窗中間的left 值 c)

當前left 值加上document 的滾動條水平方向滾動的距離即為最終的left 值

2)

top位置的計算

a) 獲取當前視窗（window 的可視區域）的高度 b)

計算當前物件在該視窗中間的top 值 c)

當前top 值加上document 的滾動條豎直方向滾動的距離即為最終的top 值

css 利用translate讓元素居中

參考 父元素 position relative 居中元素 position absolute top 50 基於父元素 left 50 基於父元素 transform translate 50 50 基於自身 注意 此方法可能會導致畫素模糊問題，因為css 的 transform translat...

如何讓元素頁面居中

這分為兩種情況 1 有寬高的情況下，實現水平和垂直居中 方法一 使用定位 position absolute left和top值為50 然後margin的left和top減去寬高的一半。效果圖 方法二 使用定位position absolute 四個方向值都是0，然後margin auto 有寬高的...

css讓元素水平垂直居中

利用flex布局 無需知道被居中元素的寬高 container利用absolute transform 無需知道被居中元素的寬高 設定父元素非 static 定位 container 子元素絕對定位，使用 translate的好處是無需知道子元素的寬高 如果知道寬高，也可以使用 margin 設定 ...