CSS筆記（〇）：元素居中

0.水平居中

元素水平居中需求比較常見，常見的作法是經過margin來完成。

元素默認的margin-left和margin-right應該都是0。

而元素水平居中其實只須要把margin-left和margin-right都設置成auto就能夠了。

.demo {
    margin-left:auto;
    margin-right:auto;
}

網上有一種常見的寫法是：

.demo {
    margin: 0 auto;
}

這樣寫簡短些，不過在設置margin-left和margin-right爲auto時，也設置了margin-top和margin-bottom爲0。

1.垂直居中

垂直居中作起來比較麻煩，常見的一種方法是經過vertical-align:middle來實現。

但是vertical-align的效用很奇怪，竟然是讓兄弟元素向本身對齊（竟然是做用在別的元素身上）。

下面使用 僞元素first-child 和 before 配合vertical-align實現垂直居中：

.demo-parent > * {
    display: inline;
    vertical-align:middle;
}

.demo-parent:first-child:before {
    content: "";
    height: 100%;
    display:inline-block;
    vertical-align:middle;
}

0.因爲vertical-align做用於「同行」兄弟元素，因此兄弟元素至少是display:inline這樣可共行的。因爲是相互對其，因此也須要vertical-align屬性。

1.因爲vertical-align對齊是以本身的高度作參照，僞元素height:100%是爲了和父元素同樣寬，display:inline-block是使內容爲空的該僞元素能夠有高度。

2.注意vertical-align實際上是一個僞元素的屬性，並不是demo-parent的。

demo-parent的子元素因爲這個兄弟僞元素而垂直居中。

前提是同行，若是元素被擠到下一行，這個僞元素的vertical-align並不對其起做用。

2.CSS3中簡便的寫法

CSS3爲display屬性添加了flex這個新的可用值，在該值下只須要簡單地給父元素設置幾個屬性就能夠實現居中。

justify-content:center;使得子元素水平居中

align-items:center;使得子元素垂直居中

.demo-parent {
    display:flex;
    justify-content:center;
    align-items:center;
}