css的box居中問題?

時間 2021-08-12 12:00:12

1樓:周源

會不會是我理解錯了,當top: 50%, left: 50%的時候,是box包括margin,padding,border在內的,也就是最外面的那一層margin的左上角的點在螢幕中心,如果把margin的left和top各減少width和height的一半,而top和left不變,從而產生整個box的偏移。

之所以不知道為什麼會偏移,是在margin的減少的過程的理解上。margin的減少過程應該是除了margin以為的box部分位置不變,變得是margin外邊框和內邊框之間的距離,這樣margin左上角的點就不在整個螢幕的中心點了,而top和left要不變,所以整體box要發生偏移,此時margin的left,top值已經為負數且絕對值為width和height的一半,所以margin左上角的點位於整個box的中心點。

而原來的理解是margin的外邊框位置不變,,這樣margin左上角的點還在螢幕中心點上,而top和left不變,所以沒搞懂為什麼整個box會發生偏移。

還有一種是用transform: translate(-50%, -50%)的,但是這兩種方法有本質的區別,改變margin之後top和left還是50%,而transform是強制發生偏移, top和left已經發生改變了

CSS 屬性 display 取值 box 和 flexbox 以及 flex 有什麼不同,分別表示什麼?

除了firefox,chrome safari opera 等瀏覽器對舊版支援已經很好了,舊版就是display webkit box moz box box 混合版本是針對IE10的,display ms flexbox 還有現代版,display flex。 一絲 瀉藥。這種 Google 一下...

求助數學問題(矩陣面積 css壓縮演算法相關)?

Shuhai 鑑於題主要求計算出所有可能,這裡有乙個簡單明瞭的演算法 複雜度略高 1.設矩陣的橫座標為x1,x2,x3,x4,x5,xn,縱座標為y1,y2,y3,y4,yn。2.每個矩形都可唯一表示為S x xa1,xa2,xa3 xan y yb1,yb2,yb3,ybn 例如左上角的矩形是S ...

如何解決同居中遇到的摩擦

同居生活產生矛盾,往往是因為兩個人距離接近引起的更多衝突,並且日夜相處所帶來的疲勞感。確實每個人都有劣根性,這在平常的戀愛中未必能體現出來。而你所描述的這種劣根性,已經是很多女性所無法忍受的了。乙個男人對女人最基本的關心都沒有,只在乎在你身上發洩慾望,是十分自私的。房租他就比你多了100而已,看不出...