居中（水平居中垂直居中）

一、水平居中。

1.最普通的（在視口或視窗中）水平居中。

先寫乙個div，給它一些基本樣式。

此時只用設定乙個屬性：margin，

就得到了居中的結果（沒錯，這就是凝膠物布局，此方法必須設定元素的width）。

2.居中乙個絕對定位的元素。

上述方法的元素使用預設的定位，即static，那麼當元素是絕對定位（absolution）時，就用到了這個公式：

於是另class為box的元素的left:100px;即可另其水平居中。

3.居中乙個寬度不定的元素。

以上兩個方法的父元素寬度必須確定，那麼當父元素的寬度不確定時，就可用此方法。公式：

x=child width;

y=x/2;

設定：

當然，此方法也可用於子元素的寬度也不確定時：

二、垂直居中。

1.把元素顯示方式設定為**，如此就可用**的vertical-align屬性。

2.和水平居中的方法3類似，將元素的top設為50%，margin-top設為負的content高度的一半（如果padding不為0，那麼margin-top為負的content和padding的和的一半），height必須給定。

因為高度固定，所以內容可能溢位，此時可以設定overflow:auto;這樣當內容太多，就會出現滾動條。

3.和水平居中的方法1類似，設定position:absolution;（注意：若只是設定水平居中，並不需要設定position為absolution）把它從流中抽離出來，設定寬高，設定top:0;bottom:0;margin:auto;如此便能居中。

對於這個方法為何能居中，我個人的理解是，因為元素有一定的高度，設定top:0;bottom:0;並不能使上下距離都為0，於是設定了margin:auto;後為同時滿足top和bottom的要求，就只能使其居中（兩邊一樣距離，公平、不偏心，就是這麼通俗易懂(^__^) ）

4.單行為本中，把文字所在元素的line-height設定為該元素的height即可。僅僅適用於單行文字。可以用於小元素如按鈕文字或單行文字居中。

5.在要居中的元素前面再加乙個元素（不是巢狀關係，而是同級關係），讓此元素高度為視口的一半，再設定其margin-bottom為負的要居中元素的高度的一半。

居中（水平居中 垂直居中）