在做專案時， 我經常會遇到這樣一種情況：在乙個div裡渲染乙個正方形或圓形的物體， 這個物體是佔滿整個div的，而這個div的寬度會隨著父元素的寬度變化而變化。為了讓這個物體的效果不變形，必須保持div的長度和寬度一致，那麼怎麼做呢？
div我們先來看一下padding-top的取值：
取值描述
length
規定以具體單位計的固定的上內邊距值，比如畫素、厘公尺等。預設值是 0px。
%定義基於父元素寬度的百分比上內邊距。
inherit
規定應該從父元素繼承上內邊距。
從上面的表中， 可以看到當padding-top的取值為百分比的時候，這個百分比是相對于父元素的寬度，因此當設定div的樣式padding-top: 100%;也就將div的高度撐高到和寬度相等。
如果想要在這個div裡面放子元素，可以將該div設定position:relative， 子元素設定為position:absulute; left:0; top:0 。如果想要子元素的寬高相等，只需要再設定子元素的樣式為：width:100%; height;100%。
參考文章：
不定寬高的div如何垂直居中
話不多說，先上效果圖 複製 採用絕對定位 wap center 複製 flex布局 對進行布局的父容器的display進行設定 wap center 複製 布局 父元素設定為 display table cell vertical align middle text align center 子元素...
html 中 div不定寬度如何水平居中的解決方案
傳統的水平居中樣式 margin 0 auto 這個方法要求使用這個樣式的dom元素,必須同時定義寬度width.如果dom元素內容是不固定的,那麼就無法定義寬度.所以這個地方就很難弄.經過多次摸索終於找到解決方案.經過測試發現相容性還行.display table 重點就是這個屬性,這個樣式會告知...
JS設定DIV的寬度
今天做web系統的js部分，發現在firefox瀏覽器 以下簡稱ff 裡，對div的height設定無效 而ie就沒有問題。先是用 scorll val attr width 500 scorll val attr width 500px scorll val attr width 500px 都沒...