整體布局垂直居中css-tft每日頭條

整體布局垂直居中css

生活更新时间:2024-11-24 20:38:48

歡迎關注！

css垂直居中布局要求子元素在父元素垂直居中，并且子元素與父元素高度均為可變的。

整體布局垂直居中css（web前端開發中css垂直居中布局解決方案大全）1

垂直居中布局解決方案通用html

方案一：使用table-cell和vertical-align實現垂直居中布局

通過設置.parent{display：table-cell；verticzl-align:middle}，table-cell将父元素顯示方式設置為了表格單元格顯示，在父元素上設置垂直居中屬性為middle，從而使得父元素中的子元素在顯示時都表現為垂直居中。

評價：該方案可以兼容到IE8，并且隻需要設置父元素就可以實現居中。

方案二：使用absolute和transform實現垂直居中布局

通過設置.parent{position：relative；}，将父元素設置為相對定位元素，作為絕對定位元素的參照物。

設置.child{position：absolute；top：50%；translateY（-50%）；}，将子元素設置為絕對定位元素，并将其定位到距離父元素頂部50%的位置，在子元素沿Y軸方向向上移動自身高度的50%，從而實現居中，由于距離都是使用百分比實現的，所有元素寬度都是可變的。

評價：子元素作為絕對定位元素脫離了文檔流，不會影響到後續元素的布局。同時，如果父元素隻有唯一的子元素，那麼在子元素脫離文檔流之後，父元素就會失去高度，所以上面的例子并不是完善的。

方案三：通過flex和align-items實現垂直居中

設置.parent{display:flex；align-items:center；}，将父元素設置為flex彈性元素，再設置align-items屬性将flex彈性元素中的子元素設置為居中對齊（垂直）。從而實現垂直居中布局。

評價：flex彈性元素屬于css3中新引入的，兼容性還不是很好。

收藏轉發請先關注，謝謝支持！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

生活胸腹式呼吸法訓練方法
1、發聲時，氣息的動向是往上的。呼氣時，輸送氣息的步驟是：上腹部的力量把氣推到胸部，然後再從胸部呼出... 2023-07-01
生活相親第一次見面聊什麼
1、初次見面，應該大方的介紹自己并向對方問好，介紹自己的内容不能太短也不能太長。介紹時間太短了，對方... 2023-07-01
生活 win7系統的設置在哪裡
1、win7系統的設置在控制面闆裡面,右鍵點擊計算機——控制面闆即可打開設置。點擊開始——右鍵點擊計... 2023-07-01
生活去衣服汗漬發黑的方法
1、淘米水去漬法：用淘米水洗，即可除去，還有漂白作用。2、食鹽溶液去漬法：可用濃度10%-30%的食... 2023-07-01
生活什麼是立春交接時間
1、2021年立春是公曆2021年2月3日22點58分，農曆庚子年十二月二十二号.2、按照二十四節氣... 2023-07-01
生活牆磚上的蠟怎麼去除
1、準備好面粉，将其灑在蠟的位置，然後使用幹毛巾擦拭。2、購買一些鋸末，塗抹在牆面有蠟的區域，接着使用毛巾擦拭。3、準備一盆清水，加入洗衣粉調配，将毛巾沾濕後擦拭。4、用熱水擦拭牆面上的蠟，讓其溶解。 2023-07-01
生活不用成型水的起泡膠怎麼做
1、首先，我們需要準備一個空的、幹淨的容器，然後在容器内倒入适量的之前準備好的膠水。2、接下來，我們... 2023-07-01
生活 win10接電後自動開機
1、一般初次安裝Win10或者Win10強推系統升級的時候就可能出現通電電腦就自動開機的問題，解決方... 2023-07-01
生活紅木家具如何挑選
1、選購要點看木紋：由于材質不同，在家居賣場裡，同樣一個餐桌，實木家具和闆材家具的售價相差千元以上。據大明宮家居建材城的資深導購人員介紹，與闆式家具相比，實木的特殊材質形成了自然的色差、木結和紋理，選購時隻要依據商家的介紹仔細看清楚，就能鑒别出實木與闆材。2、選材質：現在，西安市場上銷售的實木家具所... 2023-07-01
生活高鐵票預售期是多少天
1、高鐵票的預售期為30天，出行前一個月便可通過電話、網絡和櫃台進行購買。2、預訂高鐵車票分為兩種情... 2023-07-01
生活适合發朋友圈的短句子
1、無論你活成什麼樣子，背地裡都會有人對你說三道四，不申辯不計較一笑了之，其實就是最好的蔑視。2、我... 2023-07-01
生活白砂糖是什麼做的
1、白糖是由甘蔗和甜菜榨出的糖蜜制成而成的。2、白砂糖是食糖的一種。其顆粒為結晶狀，均勻，顔色潔白，... 2023-07-01
生活簡單文藝情侶網名
1、魚的夢|貓的心2、北京巷弄|南街酒樓3、青弦墨韻|素骨白筝4、椿兮如夢|湫兮如風5、夏陽炙亮光|... 2023-07-01
生活武功縣美食
武功縣美食有倪家大鍋盔、武功鎮旗花面、普集燒雞、北韓大麻花、插酥加雞蛋等。1、倪家大鍋盔：來源于古代士兵在作戰中應急，把面粉調料和為面片放在頭盔上燒制，祖先以此為原理研制而成。特點是煮吃不爛、光滑筋鬥、幹吃酥脆、香甜可口、營養豐富。倪家大鍋盔，在祖傳工藝基礎上結合現代科技，配方優良，做工精細，采取專用優質小麥面粉經過特色發酵，改用鐵鍋文火加紅外線慢烤，不含任何添加劑和人工色素，屬綠色食品。2、武功 2023-07-01
生活冬天怎樣開空調省電節能又健康
1、設置空調溫度：先高再調低。空調開機時，可以先設置稍高溫度（比預期溫度稍高），讓空調快速達到預期溫... 2023-07-01
生活氟矽唑能不能配葉面肥
1、可以用20%含量苯醚甲環唑1500到2000倍、氟矽唑6000到8000倍、戊唑醇6000到80... 2023-07-01
生活楊桃嫁接方法
1、選取砧木：要想嫁接出好的樹苗。對于砧木的選擇要有一定的标準,要求砧木苗必須要在30cm高以上,莖... 2023-07-01
生活空調過濾網怎麼拆
1、拆卸空調過濾網之前，先小心翼翼地把空調外殼打開，輕輕地把外蓋向外開。2、開啟空調外蓋後，先把過濾... 2023-07-01
生活 kakao輸入手機号無法連接服務器
顯示無法連接到服務器，是因為新手機還沒有适應wifi裡的網絡，等24小時後重新試一下即可，具體的解決... 2023-07-01
生活什麼是得房率
1、得房率是指可以讓住戶自由支配的面積與每戶建築面積之比。如果得房率太低，不實惠;太高，不方便。因為... 2023-07-01
生活如何開淘寶服裝店
1、要有一台個人電腦，這是必須的，因為網店涉及到個人資金問題，所以要保證網絡安全，現在病毒木馬泛濫，... 2023-07-01
生活桃子怎麼傳播種子
1、桃子傳播種子主要靠兩種方式，第一種是人工傳播種子，現在人工種植的桃園一般以嫁接優良品種以及扞插的... 2023-07-01
生活天絲被怎麼洗
1、應該用洗絲質的洗滌液，如果沒有可以用中性的洗滌液代替。淺色和深色分開洗滌。2、可放在水中浸泡幾分... 2023-07-01
生活裝配式建築和集成房屋的區别是什麼
相同點：組件均在工廠提前生産現場施工比傳統建築模式更高效，現澆作業少不同點：用途：集成房屋更多的用于臨時性和活動用房，易于拆遷、周轉；裝配式建築主要用于永久居住的整體住宅，主要特點是預制化、施工速度快、效率高。 2023-07-01
生活四川的八大特産
1、蜀繡：是在絲綢或其他織物上采用蠶絲線繡出花紋圖案的中國傳統工藝。作為中國刺繡傳承時間最長的繡種之... 2023-07-01
生活西紅柿汁弄到衣服上怎麼洗掉
1、衣服上一沾上西紅柿汁，立即用食醋浸泡液漬處數分鐘，用清水洗淨即可。2、撒些食鹽并輕輕地用水潤濕，... 2023-07-01
生活 cad布局畫圖步驟
1、首先平面圖得到後，我們第一步就是将裝修融入到布局圖中，這裡需要注意，圖層切換為裝修圖層；2、第二... 2023-07-01
生活醋消毒方法
1、将門窗緊閉，将醋倒入電飯煲，把電飯煲放在客廳中央，插上插座，開啟煮飯模式，使醋酸的蒸氣充滿整個房... 2023-07-01
生活小于号怎麼打
1、一般方法。首先将收入法切換為英語輸入法。再同時按住“shift”和大于或小于号的鍵盤即可打出“”... 2023-07-01
生活如何讓襪子洗後變柔軟
1、暴曬：将洗滌完發硬的襪子在太陽底下暴曬，這樣不僅能殺菌，還能使襪子變軟。2、柔順劑洗滌：襪子洗完... 2023-07-01

tft每日頭條

> 生活

> 整體布局垂直居中css

整體布局垂直居中css

相关生活资讯推荐

热门生活资讯推荐

网友关注