CSS實現(xiàn)div不設高度完全居中
發(fā)布時間：2021-02-04 11:44:42 作者：譚峰 
我要評論
我要評論這篇文章主要介紹了CSS實現(xiàn)div不設高度完全居中，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
要求
- body下div垂直居中
- div內文字垂直居中
- div寬度和高度均為body寬度的一半
分析
- div居中不難，考慮
margin或者left/top配合translate屬性實現(xiàn) - 關鍵點在于div高度等于body一半，由于body沒有高度，設置div
height： 50%；得到的結果是div的高度為0 - 即使通過對body進行絕對定位的手段使得body高度為100vh，div高度設置50%也只能是body高度的一半，而不是寬度的一半
- 此時要借助于
padding，因為padding設置百分比時，參考便是父容器的寬度
代碼
<!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>
效果
到此這篇關于CSS實現(xiàn)div不設高度完全居中的文章就介紹到這了,更多相關CSS div不設高度完全居中內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
純Css實現(xiàn)Div高度根據(jù)自適應寬度（百分比）調整
這篇文章主要介紹了純Css實現(xiàn)Div高度根據(jù)自適應寬度（百分比）調整，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2020-07-16
CSS設置盒子容器(div)高度(height)始終為100%
這篇文章主要介紹了CSS設置盒子容器(div)高度(height)始終為100%,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2020-07-14- 下面小編就為大家?guī)硪黄狢SS控制div寬度最大寬度/高度和最小寬度/高度的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-12
- 這里我們來看一下在不固定寬度和高度的情況下CSS調整div居中的方法總結,考慮到了老IE的兼容性,同時也有CSS3的translate屬性解決方法介紹,需要的朋友可以參考下2016-06-14
div+css最小高度的設置方法兼容各瀏覽器ie6+/Firefox
只有一行字，內容部分就變的很小，直接設置一個高度的話，當內容很多時又會溢出，下面與大家分享下兼容各瀏覽器設置DIV最小高度的方法2014-09-04IE6 div最小高度去除方法以及IE6div垂直居中css樣式
使用CSS定義DIV的高度的時候經(jīng)常遇到這個問題，就是當DIV的最小高度小于一定的值以后，就會發(fā)現(xiàn)Div的高度會固定在一個值不再發(fā)生變動，下面有個不錯的示例感興趣的朋友不要2013-11-14div+css最小高度的實現(xiàn)代碼(兼容ie6/ie7/ie8/firefox)
今天研究了一下兼容各瀏覽器設置DIV最小高度的方法，拿來分享2013-05-31- 假如div里有內容，即有元素，那么div默認有一個最小高度，如果div沒有設置屬性font-size:10px; ，那么該div最小的高度則是瀏覽器默認文本高度，反之，則是以font-size為準2013-04-15
CSS min-height IE6、IE7、FF下DIV自適應高度
IE6、IE7、FF下DIV自適應高度2010-05-13- IE6下默認的字體尺寸大致在 12 – 14px 之間，當你試圖定義一個高度小于這個默認值的 div 的時候， IE 會固執(zhí)的認為這個層的高度不應該小于字體的行高。2009-12-08