水平居中 和垂直居中

水平居中的实现
1. 设置居中，其内容实现居中

<div style="display: inline; text-align: center;">
        <p>qqqqqqqqqqqqqqqqqqq</p>
    </div>

2.通过table设置文本水平居中

table 是告诉浏览器，当前元素的宽度使用最小宽度，不熟默认的全宽

    <div style="display: table; margin: 0 auto;">
        uuuuuuuuuuuuuuu
    </div>

3 . 通过设置 相对位置的方式实现水平居中

  <div style="float: left; position: relative;left:50%;">
   <p  style="position:relative;left:-50%;">
   eeeeeeeeeeeeeeeeeeeee</p>
    </div>

垂直居中的实现

1.文本垂直居中

<div>
  <p style="line-height: 200px;">rrrrrrrrrrrrrrrrr</p>
</div>

2.图片垂直居中

<div style="line-height: 200px">
<img src="" title="图片" style="vertical-align: middle;"
</div>

3.通过table实现垂直居中

 <div style="display: table;" >
 <p style="dispaly:table-cell; vertical-align: middle;">
 eeeeeeeeeeeeeeeeeeeee</p>
 </div>

4 . 垂直居中

<div style="padding: 5% 0;" >
<p style="padding: 10% 0;">
eeeeeeeeeeeeeeeeeeeee</p>
</div>