元素的水平垂直居中問題

2021-10-06 21:20:59 字數 1159 閱讀 9853

class


="outbox"


>


class


="box"


>


div>


div>
一、margin

.outbox


.box
缺點：必須要知道兩個盒子的寬高，然後自己算，十分麻煩。

二、定位

.outbox


.box
缺點：必須要知道兩個盒子的寬高，然後自己算，十分麻煩。

三、定位 + 位移

.outbox


.box
優點：不需要知道盒子的寬高，相容性高。

四：display：flex

.outbox


.box
優點：寫法簡單，高效，移動端幾乎不需要考慮相容性。

缺點：在pc端可能會存在相容性。

五、display: table-cell

.outbox


.box
六、js + margin

var outbox = document.


queryselector


('.outbox'),


box = document.


queryselector


('.box'),


w= outbox.offsetwidth,


h= outbox.offsetheight,


w = box.offsetwidth,


h = box.offsetheight;


box.style.marginleft=((


w-w)/2


)+'px'


;        box.style.margintop=((


h-h)/2


)+'px'


;

元素水平垂直居中

lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...

元素水平垂直居中

給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位，再依次新增以下屬性，具體 如下所示。position absolute top 0 left 0 right 0 bottom ...

元素水平垂直居中

只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...