水準居中 和垂直居中

水準居中的實作

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>