首先我們應該知道文字的水平居中比較簡單，行級元素設置其父元素的text-align center，塊級元素設置其本身的left 和 right margins為auto即可。但是div文字的垂直居中就不是那么簡單了，所以我們就來具體看看div文字垂直居中的幾種實現方法。

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

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

示例：

<div style="vertical-align: middle;display: table-cell;">
    <img src="02.jpg" alt="">
    <p>文本居中</p></div>

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

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

示例：

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

3、利用內邊距（padding）讓文字垂直居中

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

示例：

p { padding:20px 0; }

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:0 auto;
    color:#fff;
}

本篇文章到這里就全部結束了，想進一步了解上述代碼所用到的各種屬性可以參考php中文網的css使用手冊和css3學習手冊！！！

以上就是div文字垂直居中的方法有哪些？div文字垂直居中顯示的方法介紹的詳細內容，更多請關注php中文網其它相關文章！