文本标签在div内水平垂直居中显示

在写页面时，通常导航栏和页面最底部的信息一般都是文字信息，而且都是居中显示的。

能实现这种效果的方法有很多，用定位或者浮动都可以，今天就介绍两种别的方法来实现这种效果。

1）给父级元素加display：table；text-align：center；
给子元素添加display：table-cell；vertical-align：center；

上图代码：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100%;
            height: 300px;
            margin-top: 30px;
            display: table;
            text-align: center;
        }
        p{
            font-size: 20px;
            width:70%;
            background-color: #e78686;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
	
	<div>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
    </div>

2）在p标签后面加span标签，注意不能有空格，也不能换行
给父级加text-align：center；
给p设置display：inline-block；
给span元素设置display：inline-block；height：100%；width：0px；vertical-align:middle;

上图代码：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100%;
            height: 300px;
            margin-top: 30px;
            text-align: center;
            background-color: #b3e94f;
        }
        p{
            font-size: 20px;
            width:70%;
            background-color: #e78686;
            display: inline-block;
        }
        span{
            display: inline-block;
            height: 100%;
            width: 0px;
            vertical-align: middle;
        }
    </style>
	<div>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p><span></span>
    </div>