前言兩年前工作時開的部落格，一年前寫了兩篇博文，然後就到了現在才重拾起筆。原因有二，一是自覺技術不足，二曰懶。
最近由於在專案中遇到需求為拖動列可調整列順序的**，最後找到一款基於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;
各種居中問題總結
1.寬度確定的塊狀元素水平居中 margin 0 auto 2.不定寬塊狀元素水平居中 設定父元素為 position relative float left left 50 設定子元素 想要居中的元素 為 position relative left 50 這種方法只適合父元素寬度不確定的情況.3...
前端 各種小問題
之前的 正確的做法是。不繫結source標籤裡的src屬性，而是繫結video標籤中的src屬性。改正如下 顯示 id屬性是元素唯一的標識，在乙個文件中每個元素的id值都不同，而且元素只能有乙個id 在乙個文件中，class屬性可以重複，方便設定同樣的樣式，可以通過class選擇器選擇多個元素，乙個...
前端居中問題總結
一 text align center 只是將元素下面的內聯元素居中，常見於文字水平居中。二 flex布局 display flex justify content center 水平居中 align items center 垂直居中 三 垂直居中 1，line height height時 2，...