前言
兩年前工作時開的博客，一年前寫了兩篇博文，然后就到了現在才重拾起筆。原因有二，一是自覺技術不足，二曰懶。
最近由於在項目中遇到需求為拖動列可調整列順序的表格，最后找到一款基於JQuery名為DataTables的插件，但網上為之寫使用方法的很少，質量也很差，所以就動了為之寫一個較為全面的使用方法的文章，又由於最近項目工作繁忙，所以一周過去了還沒有寫，今天抽空寫了這篇文章，至於那個插件則以后抽時間寫。
這篇文章里的方法不多，但都是些常用的，足夠解決問題了。
正文
水平垂直居中
1.給元素定位使之居中（利用定位和transform平移的那種方法就不需要寫了）
為居中元素的父級添加以下樣式：
原因：為元素設置absolute定位時需要為父級設置非static定位
position: relative;
為居中元素添加以下樣式：
注意：不給居中元素設置寬高的話，該元素會與設置非static定位的父級（沒有的話會是html元素）同寬高。
width: 40px; height: 40px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
我們可利用上面的定位方式讓一個元素與瀏覽器頁面顯示區域同寬高，具體方法如下：
設置html元素寬高：
width: 100%;
height: 100%;
設置該元素樣式如下（該元素與html元素之間的元素不要設置非static定位）：
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
2.設置彈性布局使子元素居中兩種方式
方式一:為居中元素父級設置以下樣式：
width: 400px;
height: 400px;
display: flex;
為居中元素添加以下樣式：
margin: auto;
方式二:為居中元素父級設置以下樣式：
display: flex;
align-items: center;
justify-content: center;
垂直居中
利用行高居中
為居中元素父級設置以下樣式：
此方法可為元素內文字和行元素設置垂直居中
line-height: 50px;
水平居中
1.利用margin實現居中
為居中元素添加以下樣式：
必須為居中元素設置寬
width: 200px;
margin: auto;
2.利用text-align樣式居中
為居中元素父級添加以下樣式：
此方法可為元素內文字和行元素設置垂直居中
text-align: center;