div文字垂直居中的方法有哪些？ div文字垂直居中顯示的方法介紹

垂直居中是佈局在前端佈局中是非常常見的居中方法，接下來的這篇文章就給大家來介紹一下div文字垂直居中的實作方法，有需要的朋友可以參考一下。

首先我們應該知道文字的水平居中比較簡單，行級元素設定其父元素的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="/static/imghwm/default1.png"  data-src="02.jpg"  class="lazy"   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中文網其他相關文章！