CSS將div內(nèi)容垂直居中案例總結(jié)
一、行高(line-height)法
如果要垂直居中的只有一行或幾個(gè)文字,那它的制作最為簡單,只要讓文字的行高和容器的高度相同即可,比如:
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
這段代碼可以達(dá)到讓文字在段落中垂直居中的效果。
二、內(nèi)邊距(padding)法
另一種方法和行高法很相似,它同樣適合一行或幾行文字垂直居中,原理就是利用padding將內(nèi)容垂直居中,比如:
p { padding:20px 0; }
這段代碼的效果和line-height法差不多。
三、模擬表格法
將容器設(shè)置為display:table,然后將子元素也就是要垂直居中顯示的元素設(shè)置為display:table-cell,然后加上vertical-align:middle來實(shí)現(xiàn)。
html結(jié)構(gòu)如下:
<div id="wrapper"> <div id="cell"> <p>測(cè)試垂直居中效果測(cè)試垂直居中效果</p> <p>測(cè)試垂直居中效果測(cè)試垂直居中效果</p> </div> </div>
css代碼:
#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;} #cell{display:table-cell; vertical-align:middle;}
實(shí)現(xiàn)如圖所示:
遺憾的是IE7及以下不支持。
四、CSS3的transform來實(shí)現(xiàn)
css代碼如下:
.center-vertical{ position: relative; top:50%; transform:translateY(-50%); }.center-horizontal{ position: relative; left:50%; transform:translateX(-50%); }
五:css3的box方法實(shí)現(xiàn)水平垂直居中
html代碼:
<div class="center"> <div class="text"> <p>我是多行文字</p> <p>我是多行文字</p> <p>我是多行文字</p> </div> </div>
css代碼:
.center { width: 300px; height: 200px; padding: 10px; border: 1px solid #ccc; background:#000; color:#fff; margin: 20px auto; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; -o-box-align: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; -ms-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }
結(jié)果如圖:
六:flex布局(2018/04/17補(bǔ)充
)
html代碼:
<div class="flex"> <div> <p>我是多行文字我是多行文字我是多行文字我是多行文字</p> <p>我是多行文字我是多行文字我是多行文字我是多行文字</p> </div> </div>
CSS代碼:
.flex{ /*flex 布局*/ display: flex; /*實(shí)現(xiàn)垂直居中*/ align-items: center; /*實(shí)現(xiàn)水平居中*/ justify-content: center; text-align: justify; width:200px; height:200px; background: #000; margin:0 auto; color:#fff; }
實(shí)現(xiàn)效果:
到此這篇關(guān)于CSS將div內(nèi)容垂直居中案例總結(jié)的文章就介紹到這了,更多相關(guān)CSS將div內(nèi)容垂直居中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- C語言中l(wèi)seek()函數(shù)和fseek()函數(shù)的使用詳解
- JavaScript navigator.userAgent獲取瀏覽器信息案例講解
- 一篇文章告訴你如何用python進(jìn)行自動(dòng)化測(cè)試,調(diào)用c程序
- Android startActivityForResult的基本用法詳解
- CPU,GPU,DPU,TPU,NPU,BPU等處理器的性能及概念
- 一篇文章告訴你如何用Python控制Excel實(shí)現(xiàn)自動(dòng)化辦公
- docker實(shí)現(xiàn)redis集群搭建的方法步驟
- C語言lseek()函數(shù)詳解
相關(guān)文章
CSS濾鏡示范(filter)附源代碼(靜態(tài)濾鏡)
CSS濾鏡示范(filter)附源代碼(靜態(tài)濾鏡)...2006-08-08通過CSS實(shí)現(xiàn)逼真水滴動(dòng)效
哈嘍哈嘍!CSS真的好好玩啊,哈哈,反正我是愛了,空閑寫著玩。畫畫不好的我樂了,下面就是一個(gè)用CSS3動(dòng)畫完成的模仿水珠的動(dòng)效,其中主要就是會(huì)使用CSS設(shè)置陰影效果以及@keyframes關(guān)鍵幀和一些選擇器的技術(shù),快來學(xué)習(xí)吧2021-08-08