CSS實(shí)現(xiàn)div不設(shè)高度完全居中
發(fā)布時(shí)間:2021-02-04 11:44:42 作者:譚峰
我要評(píng)論

這篇文章主要介紹了CSS實(shí)現(xiàn)div不設(shè)高度完全居中,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
要求
- body下div垂直居中
- div內(nèi)文字垂直居中
- div寬度和高度均為body寬度的一半
分析
- div居中不難,考慮
margin
或者left/top
配合translate
屬性實(shí)現(xiàn) - 關(guān)鍵點(diǎn)在于div高度等于body一半,由于body沒(méi)有高度,設(shè)置div
height: 50%;
得到的結(jié)果是div的高度為0 - 即使通過(guò)對(duì)body進(jìn)行絕對(duì)定位的手段使得body高度為100vh,div高度設(shè)置50%也只能是body高度的一半,而不是寬度的一半
- 此時(shí)要借助于
padding
,因?yàn)閜adding設(shè)置百分比時(shí),參考便是父容器的寬度
代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ padding: 0; margin: 0; } #box{ width: 50%; /* div處置居中 */ position: relative; transform: translate(50%, 25%); /* */ /* 此處解決div高度為body寬度的一半,并且文字垂直居中 */ padding-top: 25%; padding-bottom: 25%; line-height: 0; text-align: center; /* */ background-color: #111; color: #fff; } </style> </head> <body> <div id="box"> box123 </div> </body> </html>
效果
到此這篇關(guān)于CSS實(shí)現(xiàn)div不設(shè)高度完全居中的文章就介紹到這了,更多相關(guān)CSS div不設(shè)高度完全居中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
純Css實(shí)現(xiàn)Div高度根據(jù)自適應(yīng)寬度(百分比)調(diào)整
這篇文章主要介紹了純Css實(shí)現(xiàn)Div高度根據(jù)自適應(yīng)寬度(百分比)調(diào)整,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著2020-07-16CSS設(shè)置盒子容器(div)高度(height)始終為100%
這篇文章主要介紹了CSS設(shè)置盒子容器(div)高度(height)始終為100%,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小2020-07-14- 下面小編就為大家?guī)?lái)一篇CSS控制div寬度最大寬度/高度和最小寬度/高度的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-12
不固定寬度和高度的情況下CSS調(diào)整div居中的方法總結(jié)
這里我們來(lái)看一下在不固定寬度和高度的情況下CSS調(diào)整div居中的方法總結(jié),考慮到了老IE的兼容性,同時(shí)也有CSS3的translate屬性解決方法介紹,需要的朋友可以參考下2016-06-14div+css最小高度的設(shè)置方法兼容各瀏覽器ie6+/Firefox
只有一行字,內(nèi)容部分就變的很小,直接設(shè)置一個(gè)高度的話,當(dāng)內(nèi)容很多時(shí)又會(huì)溢出,下面與大家分享下兼容各瀏覽器設(shè)置DIV最小高度的方法2014-09-04IE6 div最小高度去除方法以及IE6div垂直居中css樣式
使用CSS定義DIV的高度的時(shí)候經(jīng)常遇到這個(gè)問(wèn)題,就是當(dāng)DIV的最小高度小于一定的值以后,就會(huì)發(fā)現(xiàn)Div的高度會(huì)固定在一個(gè)值不再發(fā)生變動(dòng),下面有個(gè)不錯(cuò)的示例感興趣的朋友不要2013-11-14div+css最小高度的實(shí)現(xiàn)代碼(兼容ie6/ie7/ie8/firefox)
今天研究了一下兼容各瀏覽器設(shè)置DIV最小高度的方法,拿來(lái)分享2013-05-31- 假如div里有內(nèi)容,即有元素,那么div默認(rèn)有一個(gè)最小高度,如果div沒(méi)有設(shè)置屬性font-size:10px; ,那么該div最小的高度則是瀏覽器默認(rèn)文本高度,反之,則是以font-size為準(zhǔn)2013-04-15
CSS min-height IE6、IE7、FF下DIV自適應(yīng)高度
IE6、IE7、FF下DIV自適應(yīng)高度2010-05-13- IE6下默認(rèn)的字體尺寸大致在 12 – 14px 之間,當(dāng)你試圖定義一個(gè)高度小于這個(gè)默認(rèn)值的 div 的時(shí)候, IE 會(huì)固執(zhí)的認(rèn)為這個(gè)層的高度不應(yīng)該小于字體的行高。2009-12-08