**第一種：**通過絕對定位的方式 absolute + 負margin
首先知道子元素的寬高，給子元素設定top：50%；left：50%，
但絕對定位是基於子元素的左上角，我們所希望的效果是子元素的中心居中顯示。。。。借助外邊距的負值，負的外邊距可以讓元素向相反方向定位，
通過指定子元素的外邊距為子元素寬度一半的負值，就可以讓子元素居中了
**優點：**比較好理解，相容性好
**缺點：**需要知道子元素的寬高
**第二種：**也是通過絕對定位的方式 absolute + margin auto
這個是需要將各個方向的距離都設0，再講margin設為auto；就行
**優點：**相容性也很好
**缺點：**需要知道子元素的寬高
**第三種：**absolute + calc（計算）
這種方法top的百分比是基於元素的左上角，那麼在減去寬度與高度的一半就好了
calc:任何長度值都可以使用calc()函式進行計算；
calc()函式使用標準的數**算優先順序規則；
它支援 「+」, 「-」, 「*」, 「/」 運算
也可以檢視calc教程：
**優點：**他的相容性依賴的是calc的相容性
**缺點：**同樣是需要知道子元素的寬高
**第四種：**absolute + transform （過渡）
這個方法不需要子元素固定寬高
修復絕對定位的問題，還可以使用css3新增的transform，transform的translate
屬性也可以設定百分比，其是相對於自身的寬和高，所以可以將translate設定為-50%，就可以做到居中了
**優點：****量少
**缺點：**ie8不支援, 屬性需要追加瀏覽器廠商字首, 可能干擾其他 transform 效果, 某些情形下會出現文字或元素邊界渲染模糊的現象.
**第五種：**line-height
只對文字有效果，對定寬高的div是沒有用的。所以在文字水平垂直居中時使用。缺點：只對文字有效，只對單行文字有效，多行文字不可以
**第六種：**writing-mode
可以參考：
這種方法稍微有些複雜，writing-mode可以改變文字的顯示方向
**第七種：**table 形式
通過table單元格的形式設
**優點：**tabel單元格中的內容天然就是垂直居中的，只要新增乙個水平居中屬性就好了
**缺點：**這個不是table的正確方法，不是很建議使用，但是也是可以實現的
**第八種：**table-cell實現水平垂直居中: table-cell middle center組合使用
直接給父級設
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
通過給父元素設定justify-content: center;
align-items: center;就可以了
**優點：**移動端使用靈活自如
**缺點：**pc端需要根據相容情況來判定
**第十種：**grid（網格布局）
給父級設display:grid;
給子元素設align-self: center;justify-self: center;
**優點：****量少
**缺點：**相容不如flex，建議用flex
16種方法實現水平居中垂直居中
1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 float left 屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下...
16種方法實現水平居中垂直居中
熟悉水平居中和垂直居中的方法,不為別的,就為用的時候能夠信手拈來.下面直接步入正題.原文 16種方法實現水平居中垂直居中 1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 f...
16種方法實現水平居中垂直居中
熟悉水平居中和垂直居中的方法,不為別的,就為用的時候能夠信手拈來.下面直接步入正題.原文 16種方法實現水平居中垂直居中 1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 f...