HTML 內容居中方式總結

　　在HTML網頁排版經常會用到關於對其方式的情況，水平居中和垂直居中。特別是水平居中，並不是一個簡單的text-align就可以解決所有的情況。

　　開始之前普及一點HTML知識，目標很明顯，不同的頁面結構情況下，要達到居中的效果方式不同。

　　　　常用的塊狀元素有：

　　　　<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>......此外為標簽設置display:block也可強制將其他元素轉化成塊狀元素。

　　　　常用的內聯元素有：

　　　　<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>......當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。

　　　　常用的內聯塊狀元素有：

　　　　<img>、<input>.....代碼display:inline-block就是將元素設置為內聯塊狀元素。

　　默認狀態下，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，寬度都為100%，即以行的形式占據位置。內聯元素都會在所處的包含元素內從左到右水平分布顯示。

　　水平居中

　　a).如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置  text-align:center  來實現的。

　　當被設置元素為塊狀元素時用 text-align：center 並達不到居中的效果。分為定寬塊狀元素和不定寬塊狀元素兩種情況。

　　b).定寬塊狀元素，對其板塊本身進行設置：

width:500px;
margin:20px auto;

　　c).不定寬塊狀(這是最常遇到的情況)，可以細分為3個小方法:

• 加入 table 標簽

  • 第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 <tbody>、<tr>、<td> )。第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。

• 設置 display;inline 方法
  • 改變塊級元素的 dispaly 為 inline 類型  display:inline; ，然后使用  text-align:center ; 來實現居中效果
• 設置 position:relative 和 left:50%;
  • 通過給父元素設置 float，然后給父元素設置  position:relative  和  left:50% ，子元素設置  position:relative  和  left:-50%  來實現水平居中。

　　垂直居中

　　　a).父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現的。

    height:100px;
    line-height:100px;

　　　b).父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：

• • 　　使用插入 table (包括tbody、tr、td)標簽，同時設置  vertical-align：middle 。(PS:css 中有一個用於豎直居中的屬性 vertical-align，但這個樣式只有在父元素為 td 或 th 時，才會生效)　
  • 在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的  display:table-cell; ，激活 vertical-align 屬性。