關於居中，無論是水平居中，還是垂直居中都有很多方式，下面我來介紹一些常用的。
this is a div注意：如果塊級元素是body的直接子元素，不設定寬，則預設100%，看不出效果；不設定高，且div中沒有內容，則高度預設為0。因此，一定要同時設定塊級元素的寬和高，這樣才能看出來效果。對於在乙個div中的另乙個div希望居中，也可以使用這個方式，因為這時的margin是相對於其父元素而言的。
**如下所示：
faas效果圖如下：
a 我們在寫導航選單時，往往採用將標籤寫入float的中，且為了美觀，我們常常需要將a標籤中的內容水平居中和垂直居中。水平居中我們在上面已經介紹了，通過在字型的父元素內設定text-align:center;即可實現。那麼垂直居中呢？對於文字而言，我們只需要將行高設定為字型所在塊元素的高度即可。
html**如下：
css**如下： 我把a標籤的display屬性值修改為了block，所以我們就可以修改a標籤的寬度和高度了，因為li是包含a的，li會由其中的內容（即a標籤）撐開，所以在li中的width和height是不需要設定的。
因為a成為了塊級元素，所以水平居中只需要在a中新增text-decoration:none;即可。將line-height的高度和height的高度設定為相同的，就可以實現垂直居中了。
b如果要對a標籤中的字型居中，實際上還有一種更為簡單的方法。
即將a的display屬性設定位block之後，不設定其寬度和高度（li的寬度和高度也不設定），為了看清楚，我們可以給a加border，這時得到的效果圖如下：
即a的大小完全是由字型撐開的，這時我們可以通過設定上下左右的padding值達到與a方法相同的效果。html**與a中相同，css**如下：
*大家可以看到，這裡我只設定了上下padding值為10px，左右padding值為30px;在a中的width height text-align(實現水平居中) line-height(實現豎直居中)這些屬性全都沒有設定，只使用了padding:10px 30px;來代替，所以這種方法是值得推薦的。ul li
a
效果圖如下：
c 另外一種方法也可以實現行內元素的垂直居中。
**如下：
faas即我們將id為parent的div元素的display屬性值設定位table-cell，這時，即讓標籤元素以**單元格的形式呈現，類似於td標籤。這時就可以通過設定vertical-align來實現垂直居中了。但值得注意的是：table-cell會被其他一些css屬性破壞，比如float和position:absolute等等。且一旦設定位table-cell，這時margin就不能用了。這種方法也可以用於塊級元素的垂直居中。方法一：使用絕對定位和負邊距。
faas方法二：使用display：table-cell;方法。
faas大家可以看出，這個方法與行內元素的垂直居中並沒有什麼區別。
方法三：使用display:flex;**如下：
faas在父元素中新增display:flex;align-items:center;即可實現豎直居中。3.使用line-height居中。
即給父元素（塊級元素）設定height和line-height相等，然後給子元素（inline-block 或者 inline元素) 設定vertical-align:middle即可，如下所示：
"">居中又如下所示：
" alt="">這種方式是非常值得學習了。
方法一：使用絕對定位和負邊距
**如下
faas效果如下：
方法二：使用display：flex。
**如下：
faas即只需要在父元素的樣式中新增display：flex；align-items:center實現豎直居中，justify-content:center;實現水平居中。
方法三：同樣使用display:flex.
**如下：
faas我們發現只需要在父元素中設定display:flex;在子元素中設定margin：auto；即可實現居中，這種方法無疑是最簡單的。
css居中那點事兒
在css中對元素進行水平居中是非常簡單的，然而使元素垂直居中就不是一件簡單的事情了，多年以來，垂直居中已經成為了css領域的聖杯，因為它是極其常見的需求，但是在實踐中卻不是一件簡單的事情。下面我會簡單介紹水平居中，並著重討論垂直居中。en pic.png 注意 對於某個塊元素的居中，不能在其父元素的...
CSS定位那點事兒
這幾日特別學習了定位的相關屬性和用法，懵逼了好久。說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。後面又來了定位，再次飄離了文件流。經過一番心思，理解，和試探，終究是有了些眉目。稍作整理，分享給大家共同 無論是浮動還...
css定位那點事兒
這幾日特別學習了定位的相關屬性和用法，懵逼了好久。說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。後面又來了定位，再次飄離了文件流。經過一番心思，理解，和試探，終究是有了些眉目。稍作整理，分享給大家共同 無論是浮動還...