文本的垂直居中

作者: 2016_18点 | 来源:发表于2016-10-02 01:59 被阅读0次

LayaBox:富文本HtmlDivElement垂直水平居中
CSS面试题(一)
前端中的居中问题
浮动与定位02
关于文本居中/背景/边框
CSS居中,css文本截字，超出文本省略号显示
css居中完全指北
CSS垂直居中
文本垂直居中
垂直居中方法总结

**单行文本： **
使用css属性line-height实现文字垂直居中
每行文字行高跟div盒子高度一样

 .wrap{  
            width: 200px;  
            height: 200px;   
            line-height: 200px; 
            overflow:hidden; 
        }

overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了

多行文本： **
（1）使padding-top=padding-bottom**,前提就是容器的高度必须是可伸缩的

div{ padding:25px; }

（2）、使用定位将一个盒子固定在div块中间，将p标签放在盒子中就可实现多行垂直居中。

       .wrap{
            width: 200px;
            height: 200px;
            position: relative;
        }
        .inner{  
            text-align: center;/*水平居中 */  
            width: 140px;  
            height: 90px;  
            position: absolute;  
            left: 0px;  
            right: 0px;  
            top: 0px;  
            bottom: 0px;  
            margin: auto;  
        }

（3）、借助line-height和vertical-align实现多行文字垂直居中。

        p{  
            line-height:150px;  
        }  
        p>span{  
            display:inline-block;  
            line-height:1.4em;  
            vertical-align:middle;  
            font-size:18px;  
        }

（4）、就是把文字当图片处理。用一个span标签把所有的文字包进来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。

        .wrap{
            width:550px;
            height:200px; 
            display:table-cell;
            vertical-align:middle;
        }
       .inner{
            display:inline-block;
            font-size: 18px;
            text-align: center;/*文字水平居中*/
        }

（5）用display:table和display:table-cell模拟<table>就可以使用vertical-align了

      .wrap{ 
          height:400px; 
          display:table; 
       } 
       .content{ 
          vertical-align:middle; 
          display:table-cell; 
          width:760px;
        }

InternetExplorer6并不能正确地理解display:table和display:table-cell，因此这种方法在InternetExplorer6及以下的版本中是无效的