關於CSS中的居中方法

文字居中

【水平居中】

代碼：

text-align: center;

【垂直居中】

使行高的高度等於整個塊級元素的高度（有侷限性：文字只有一行時適用）

代碼：

height: 20px;
line-height: 20px;

---

塊級元素

• 方法一：
  使用margin屬性的auto來自動水平居中。（有侷限性：只有子元素的寬度 比父元素的寬度小才生效）

  代碼：

  margin: 0 auto;   /*前提：該塊級元素設置了寬度*/

• 方法二：
  給子元素設置爲相對定位，向右移動50%（left）,再用margin-left偏移負的子元素寬度的一半。當設置垂直居中時，需要設置父元素爲相對定位，子元素絕對定位，原理和水平一樣（如果設置子元素爲相對定位，則子元素的margin會傳遞到父元素中生效，所以不會產生預想的效果）
  注意：如果想讓頁面自動居中，當設置margin屬性爲auto時，不能再設置浮動或絕對定位屬性。

  代碼：

position: relative;
left: 50%;
width: 1920px;
margin-left: -960px;         /*子元素寬度的一半的負值*/

• 方法三
  水平兼垂直居中：設置父元素爲相對定位，設置子元素爲絕對定位，將子元素的上下左右設置爲0，margin設置爲auto。（有侷限性：子元素不能超過父元素寬度）
  代碼：

/*父元素樣式：*/
position: relative;
/*子元素樣式：*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;