本文小編為大家詳細(xì)介紹“如何實(shí)現(xiàn)div文字垂直居中”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何實(shí)現(xiàn)div文字垂直居中”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、富拉爾基網(wǎng)站維護(hù)、網(wǎng)站推廣。
1、vertical-align屬性讓文字居中
vertical-align值有很多，常用的就是middle，bottom，text-bottom等，然而真實(shí)使用的時(shí)候，我們會(huì)發(fā)現(xiàn)這個(gè)屬性“時(shí)靈時(shí)不靈”，有些情況下我們加了這個(gè)屬性之后仍然不見img或者text有任何的變化。那是因?yàn)関ertical-align只作用在inline-block或者inline，還有table-cell等元素內(nèi)。
示例：
文本居中
2、利用行高（line-height）讓文字垂直居中
如果要垂直居中的只有一行或幾個(gè)文字，那它的制作最為簡(jiǎn)單，只要讓文字的行高和容器的高度相同即可。
示例：
p{height:30px;line-height:30px;width:100px;overflow:hidden;}
3、利用內(nèi)邊距（padding）讓文字垂直居中
使用內(nèi)邊距讓文字垂直居中和利用行高讓文字垂直居中差不多，同樣適合一行或幾行文字垂直居中。
示例：
p{padding:20px0;}
4、利用CSS3的transform來(lái)實(shí)現(xiàn)文字垂直居中
示例：
.center-vertical{
position:relative;
top:50%;
transform:translateY(-50%);
}.center-horizontal{
position:relative;
left:50%;
transform:translateX(-50%);
}
5、利用flex布局實(shí)現(xiàn)文字垂直居中
示例：
.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:0auto;
color:#fff;
}
讀到這里，這篇“如何實(shí)現(xiàn)div文字垂直居中”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
