逛了很多文章的總結，相當於乙個大彙總，將我主要參考的人放在鏈結裡有大神顏海鏡和大神張鑫旭
子元素
方法一：absolute+負margin(這也是我在自學過程中遇到的最多的一種方式)
html**同上面的基礎**一樣，就不寫了，寫一下css**：
注意點 ：要知道子元素的寬高
方法二：absolute + margin:auto (這個我在自學過程中遇到的次數也很多)
html**也是基礎**就不寫了，寫下css**
注意：要知道子元素的寬高
方法三：absolute+calc（其實我的理解這種和第一種差不多）
html**和基礎**一樣就不寫了，接下來寫css
注意：要知道子元素的寬高，還有就是減號左右要有空格，不然可能出不來效果
既然不需要知道子元素的寬和高，那就將html中的.size去掉
子元素
transform是css3中增加的，沒看過的小夥伴可以去閱讀一下css3，translate(x,y)指在x軸，y軸的2d移動。
方法二：line-height
html**依舊是不帶.size
注意：將子元素vertical-align: middle;是將乙個行內元素垂直居中
方法三：利用table特性
子元素
這個table元素特有的性質：tabel單元格中的內容天然就是垂直居中的，只要新增乙個水平居中屬性就好了，這種解決方法不得當，因為會造成**的冗餘。
方法四：利用給父元素設定display：table-cell
子元素
其實這個方法和上乙個是乙個思路，只是這個就不會造成**的冗餘
方法五：flex
子元素
方法六：grid
子元素
元素水平垂直居中
lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...
元素水平垂直居中
給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位，再依次新增以下屬性，具體 如下所示。position absolute top 0 left 0 right 0 bottom ...
元素水平垂直居中
只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...