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;
}

感謝各位的閱讀！關于div文字如何實現垂直居中就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！