1. 寬高固定（絕對定位）
樣式：.box
.aaa
當然，也可以將margin-left: -50px;
margin-top: -50px; 換成 transform: translate(-50%,-50%);
html:
2. 寬高不固定（絕對定位）
.aaa
3. after偽類實現垂直居中對齊
樣式：#demo
#demo:after
#demo p
html:
水平垂直居中的隨意內容
注意：after和before是指在內部內容的after和before,而不是在自身的前後。還有就是vertical-align:middle;起作用是有條件的：inline，inline-block,table-cell 水平的元素上起作用。
4. flex
樣式：#demo
#demo p
html:
水平垂直居中的隨意內容
5. display:table-cell
樣式：#demo
#demo p
html:
水平垂直居中的隨意內容
行內元素與塊級元素垂直居中
行內元素的垂直居中 1.給塊級元素中的想要居中的行內元素設定 vertical align middle 這表示這些行內元素是以它們各自的中間的位置來與其他行內元素對齊的 若還是沒對齊的話,可通過在這些行內元素的父元素中設定line height 來調節.2.若行內元素的父元素高度不定,可通過設定行...
CSS 實現塊級元素垂直居中
如果是文字，我們可以使用line height將其垂直居中。但如果是塊級元素，就不能這麼做了。儘管如此，我們還是有很多方法可以將乙個塊級元素垂直居中。如果塊級元素高度和寬度已知，利用絕對定位和負邊距，就可以實現垂直居中。class container class content lorem ipsu...
行內元素和塊級元素水平及垂直居中問題
首先，介紹一下行內元素和塊級元素，這個很重要，因為有的屬性只能用於塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉換，比如用display來進行設定。行內元素 不佔據一整行，隨內容而定，有以下特點 不可以設定寬高，也不可以設定行高，其寬度隨著內容增加，高度隨字型大小而改變。內聯元素可以設定外...