如何實(shí)現(xiàn)div文字垂直居中

本文小編為大家詳細(xì)介紹“如何實(shí)現(xiàn)div文字垂直居中”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何實(shí)現(xiàn)div文字垂直居中”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

    1、vertical-align屬性讓文字居中

    vertical-align值有很多，常用的就是middle，bottom，text-bottom等，然而真實(shí)使用的時候，我們會發(fā)現(xiàn)這個屬性“時靈時不靈”，有些情況下我們加了這個屬性之后仍然不見img或者text有任何的變化。那是因?yàn)関ertical-align只作用在inline-block或者inline，還有table-cell等元素內(nèi)。

    示例：

    <divstyle="vertical-align:middle;display:table-cell;">

    <imgsrc="02.jpg"alt="">

    <p>文本居中</p></div>

    2、利用行高（line-height）讓文字垂直居中

    如果要垂直居中的只有一行或幾個文字，那它的制作最為簡單，只要讓文字的行高和容器的高度相同即可。

    示例：

    p{height:30px;line-height:30px;width:100px;overflow:hidden;}

    3、利用內(nèi)邊距（padding）讓文字垂直居中

    使用內(nèi)邊距讓文字垂直居中和利用行高讓文字垂直居中差不多，同樣適合一行或幾行文字垂直居中。

    示例：

    p{padding:20px0;}

    4、利用CSS3的transform來實(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)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。