CSS實(shí)現(xiàn)div不設(shè)高度完全居中
發(fā)布時(shí)間：2021-02-04 11:44:42 作者：譚峰 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS實(shí)現(xiàn)div不設(shè)高度完全居中，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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沒有高度，設(shè)置div
height： 50%；得到的結(jié)果是div的高度為0 - 即使通過對(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)整，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2020-07-16
CSS設(shè)置盒子容器(div)高度(height)始終為100%
這篇文章主要介紹了CSS設(shè)置盒子容器(div)高度(height)始終為100%,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-07-14- 下面小編就為大家?guī)硪黄狢SS控制div寬度最大寬度/高度和最小寬度/高度的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-12
不固定寬度和高度的情況下CSS調(diào)整div居中的方法總結(jié)
這里我們來看一下在不固定寬度和高度的情況下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è)問題，就是當(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最小高度的方法，拿來分享2013-05-31- 假如div里有內(nèi)容，即有元素，那么div默認(rèn)有一個(gè)最小高度，如果div沒有設(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