水平居中
行內元素的水平居中
text-align:center（在父元素中設定）
只對內聯元素或行內塊元素有效
需要放置于父元素中
塊級元素的水平居中
margin: 0 auto;
只對塊級元素有效
auto指的是自適應寬度。實質就是均分了元素左右的剩餘空間，所以元素會居中。
auto只有在塊級元素設定了寬度width才有效(塊級元素不設寬度預設就佔整行了，所以是廢話)
auto無法實現塊級元素的垂直居中，原因與css預設的高度計算規則有關，這裡暫不深究。但margin:auto可以實現絕對定位元素的水平垂直居中，見下文。
垂直居中
行內元素的垂直居中
line-height: 父元素的高度;（在父元素中設定）
只對內聯元素或行內塊元素有效
需要知道父元素的高度
需要放置于父元素中
適用於垂直方向上只有乙個需要居中的元素的情況（想同時垂直居中多個元素時，可以用padding）
vertical-align: middle;（用於垂直對齊inline元素）
只對內聯元素或行內塊元素有效
主要用在文字和與文字相鄰元素的垂直方向上的對齊問題（主要是對齊的作用，而不是居中的作用），
例如將乙個icon與文字對齊。
使用vertical-align需要了解文字的baseline和line-box等知識
水平垂直居中
浮動元素
使用position:relative;
具體方法與絕對定位的第1個和第2個方法類似，只不過把absolute改為relative，並根據原float的方向稍作修改即可。
相對定位relative可以和float疊加，在float後的位置上再相對定位。
缺點就是float元素居中後仍會佔據原來的位置。
第二種方式中，如果設定了浮動元素的高度，將會影響transform的具體值。
絕對定位元素
使用50%推進法則
position: absolute;
left: 50%;
top: 50%;
margin-left: -該元素自身寬度的一半px; /水平居中/
margin-top: -該元素自身高度的一半px; /垂直居中/
只對絕對定位的元素有效
需要知道絕對定位元素的寬高
相容性很好，是一種主流用法
第一種方法的改進版，使用transform代替margin
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /水平垂直居中/
不需要知道絕對定位元素的寬高。（如果設定了高度，則有可能影響到transform的具體值）
相容性一般，ie10+以及其他現代瀏覽器支援
使用margin:auto;
position: absolute;
left: 0;
right: 0; /水平居中/
top: 0;
bottom: 0; /垂直居中/
margin: auto;
只對絕對定位的元素有效
不必知道寬高，但需要是這種自身包含尺寸的元素
left與right必須配對出現，top與bottom必須配對出現
目前支援ie9+，及其他瀏覽器。
flex居中方式
display: flex;
justify-content: center; /水平居中/
align-items: center; /垂直居中/
塊級元素設定display: flex;,內聯元素設定display: inline-flex;。
需要注意的幾個問題
元素浮動後仍可以設定margin屬性，但auto不會起作用。
居中的問題
如果的寬度大於父元素的寬度, 可以絕對定位中的居中方式讓居中。但是定位流的弊端也比較明顯。它必須知道寬度。
如果的寬度大於父元素的寬度, 也可以使用margin: 0 -100%;
CSS水平和垂直居中技術
行內元素的水平居中 text align center 在父元素中設定 塊級元素的水平居中 margin 0 auto 行內元素的垂直居中 line height 父元素的高度 在父元素中設定 vertical align middle 用於垂直對齊inline元素 例如將乙個icon與文字對齊。浮...
CSS水平和垂直居中
parent.son.parent son.parent1 transform 絕對定位，left50 向左平移 50 son2 margin left 絕對定位，left50 margin left 0.5 子元素寬度 注 此方法必須知道子元素寬度 son3 left right 0 son.pa...
CSS詳解水平和垂直居中
text align center margin 0 auto 設定父元素flex布局 display flex justify content center 1.子元素使用相同內邊距撐開父元素 padding top 30px padding bottom 30px 2.使高度和行高相等 字元本來...