如何實現div文字垂直居中

本文小編為大家詳細介紹“如何實現div文字垂直居中”，內容詳細，步驟清晰，細節處理妥當，希望這篇“如何實現div文字垂直居中”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

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

    示例：

    <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、利用內邊距（padding）讓文字垂直居中

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

    示例：

    p{padding:20px0;}

    4、利用CSS3的transform來實現文字垂直居中

    示例：

    .center-vertical{

    position:relative;

    top:50%;

    transform:translateY(-50%);

    }.center-horizontal{

    position:relative;

    left:50%;

    transform:translateX(-50%);

    }

    5、利用flex布局實現文字垂直居中

    示例：

    .flex{/*flex布局*/

    display:flex;/*實現垂直居中*/

    align-items:center;/*實現水平居中*/

    justify-content:center;

    text-align:justify;

    width:200px;

    height:200px;

    background:#000;

    margin:0auto;

    color:#fff;

    }

讀到這里，這篇“如何實現div文字垂直居中”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。