對於前端學習者來說，無論是學習時還是工作時，垂直居中與水平居中都是繞不開的基本功技能，對這種基本功熟捻於心間，則可以更高效的完成工作，就有更多的時間去看書學習，良性迴圈由此而來。
居中一般分為垂直（vertically）居中和水平（horizontal）居中，如何居中？對於不同的元素，該分別用怎樣的方法居中？
水平居中
行內元素（inline）以及inline-block, inline-table, inline-flex
對於此類元素，例如、等等，可以將其父元素設為text-align:center即可
測試元素
.centerwrap.center
塊級元素（有固定寬度，無固定寬度的塊級元素將橫向撐滿它的父元素，垂直居中也就無從談起了）
對此類元素，將其margin-left與margin-right都設為auto即可，常見的設定為margin: 0 auto。順便提一下，auto的意思是佔據剩下的可用空間（父元素內），所以margin-left和margin-right都設為auto，則左右平分剩餘的可用空間，自然就水平居中了。
測試元素
.center
垂直居中
單行的行內元素
對於內容為單行的行內元素來說，將其父元素的line-height和height設為相等即可（其實如果父元素不用非得設定height，不設定height也可以垂直居中）
單行文字
.centerwrap
多行的行內元素
對於內容為多行的行內元素來說，再採用單行的垂直居中方法會得到很噁心的效果，此時可以將其父元素設定為display:table，定位元素設定為display:table-cell;vertical-align:middle
第一行文字第二行文字
第三行文字
.centerwrap.center
塊級元素（固定width）
對於有固定width的塊級元素，可使用定位和負邊距來使其垂直居中，如下：
固定寬度的div垂直居中
.centerwrap.center
塊級元素（不固定width）
對於不固定width的塊級元素，也可以使用定位和tanslate來實現垂直居中，如下：
不固定寬度的div垂直居中
.centerwrap.center
by the way，垂直和水平居中也可以使用flexbox（彈性盒子）來實現。
前端基本功之選擇題
對html5以下描述中錯誤的是 以下關於video元素描述錯誤的是 若要在網頁中插入樣式表style.css,以下用法中，正確的是 以下可以在html頁面中顯示 的是 a.it b.c.it d.請使用html解碼工具 以下可以實現核取方塊的是 通過網域名稱的字尾可以看書 所屬的機構性質，字尾為.g...
大話測試之基本功
小弟文筆不好，所以一直沒有寫什麼文章，只應最近 blog受到了不少朋友的關注，也漸漸開始寫一些文章。之前的文章基本比較散，沒有成系列，這次準備寫乙個系列的文章，幫助想進入測試行業的童鞋，暫時定名為大話測試吧。哦了，這次開篇之作，我們將從基本功開始談起，爭取每期都發表一篇文章形成系列，忘大家多多支援！...
大話測試之基本功
挨踢脫口秀，將技術娛樂化，碎片系統化，盡在荔枝fm 小弟文筆不好，所以一直沒有寫什麼文章，只應最近 blog受到了不少朋友的關注，也漸漸開始寫一些文章。之前的文章基本比較散，沒有成系列，這次準備寫乙個系列的文章，幫助想進入測試行業的童鞋，暫時定名為大話測試吧。哦了，這次開篇之作，我們將從基本功開始談...