一、水平居中
1. 行內元素水平居中
2. block元素水平居中
3. 多個塊級元素水平居中
二、垂直居中
1. 行內元素水平居中
2. block元素水平居中
3. 用flexbox
三、水平和垂直居中
1.元素是都有定寬定高
2.元素寬高不定
3.用flexbox
了解了文章的架構，就讓我們追條擊破！
一、水平居中
1. 行內元素水平居中
.center-children該方法適用於inline, inline-block, inline-table, inline-flex
2. block元素水平居中
.center-me3. 多個塊級元素水平居中
.inline-block-center 或結果如圖.flex-center
如果有多個塊級元素堆疊在彼此的頂部，在這種情況下，auto margin就很好。
main div結果如圖：
二、垂直居中
1. 行內元素垂直
1.1 單獨一行
它們的上和下有相等的padding
.link如果padding由於某種原因不是乙個選項，並且你試圖居中一些nowrap的文字，有乙個竅門是使line-height等於文字高度。
.center-text-trick1.2 多行
上下padding相等同樣適用。但有時文字是table cell 就不適用了。但是我們還有法寶，vertical-align可以解決這個問題。
.center-table .center-table p或者 flex大神
//這是父元素注意，只有父容器具有固定高度（px，％等），這才是真正相關的，這就是為什麼這裡的容器有乙個高度。.flex-center-vertically
如果這兩種技術都出來了，你可以使用「ghost element」技術，其中全高度偽元素被放置在容器內，文字與該元素垂直對齊。
.ghost-center .ghost-center::before .ghost-center p2. block元素垂直居中
2.1 元素高度已知
.parent .child2.2 元素高度未知
.parent .child3.用flexbox
.parent三、水平和垂直居中
1.元素是都有定寬定高
.parent .child2.元素寬高不定
.parent .child3.用flexbox
.parent四、結論
CSS 垂直居中和水平居中
position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...
CSS垂直居中和水平居中
總括 css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。人生用物，各有天限 夏澇太多，必有秋旱。水平居中設定 行內元素 設定 text align center ...
CSS 水平居中和垂直居中
1 水平居中 行內元素 text align center 2 水平居中 定寬塊狀元素 margin auto，滿足定寬和塊狀兩個條件的元素是可以通過設定 左右margin 值為 auto 來實現居中的。3 水平居中 不定寬塊狀元素 不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 1 ...