在css中對元素進行水平居中是非常簡單的，然而使元素垂直居中就不是一件簡單的事情了，多年以來，垂直居中已經成為了css領域的聖杯，因為它是極其常見的需求，但是在實踐中卻不是一件簡單的事情。下面我會簡單介紹水平居中，並著重討論垂直居中。
"en注意：對於某個塊元素的居中，不能在其父元素的樣式中設定text-align:center，這是無效的。下面介紹塊元素的居中方式。">
pic.png
">
"en注意：如果塊級元素是body的直接子元素，不設定寬，則預設100%，看不出效果；不設定高，且div中沒有內容，則高度預設為0。因此，一定要同時設定塊級元素的寬和高，這樣才能看出來效果。對於在乙個div中的另乙個div希望居中，也可以使用這個方式，因為這時的margin是相對於其父元素而言的。">this
is a div
**如下所示：
"en效果圖如下：">"
parent
">
"son">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 另外一種方法也可以實現行內元素的垂直居中。
**如下：
"en即我們將id為parent的div元素的display屬性值設定位table-cell，這時，即讓標籤元素以**單元格的形式呈現，類似於td標籤。這時就可以通過設定vertical-align來實現垂直居中了。但值得注意的是：table-cell會被其他一些css屬性破壞，比如float和position:absolute等等。且一旦設定位table-cell，這時margin就不能用了。這種方法也可以用於塊級元素的垂直居中。也可以使用display:flex; 以及 align-items:center; 但是這樣就不能用text-align:center;">"
parent
">
faas
方法一：使用絕對定位和負邊距。
"en方法二：使用display：table-cell;方法。">"
parent
">
"son">faas
"en大家可以看出，這個方法與行內元素的垂直居中並沒有什麼區別。">"
parent
">
faas
方法三：使用display:flex;**如下：
"en在父元素中新增display:flex;align-items:center;即可實現豎直居中。**如下">"
parent
">
faas
"en效果如下：">"
parent
">
"son">faas
**如下：
"en即只需要在父元素的樣式中新增display：flex；align-items:center實現豎直居中，justify-content:center;實現水平居中。">"
parent
">
faas
**如下：
"en我們發現只需要在父元素中設定display:flex;在子元素中設定margin：auto。">"
parent
">
faas
在方法一中，我們必須知道子元素的width和height才能使用負邊距使其居中，但是如果其width和height不是確定的值，這個方法就不可用了。下面這種使用css變形屬性的方法可以很好的解決這一問題，因為translate()變形函式中使用的百分比值時，是以這個元素自身的寬度和高度為基準進行換算和移動的。舉例如下：
"en**中我只設定了寬度，而沒有設定高度，即高度自適應，最終效果如下所示：">"
father
">
"son">子元素，沒有設定高度。子元素，沒有設定高度。子元素，沒有設定高度。子元素，沒有子元素，沒有設定高度。
即使我們新增或減少內容，也可以達到垂直居中的目的！
在父元素中使用position:relative;在子元素中使用position:absolute;將其margin值設定為auto；並且四個方向都設定為0即可。
**如下所示：
"en最終效果如下所示：">class="
parent
">
class="
son">居中元素
這樣做的好處就是我們我們不需要知道父元素和子元素的寬度和高度，而只要使其尺寸固定即可。
css中關於居中的那點事兒
關於居中，無論是水平居中，還是垂直居中都有很多方式，下面我來介紹一些常用的。this is a div 注意 如果塊級元素是body的直接子元素，不設定寬，則預設100 看不出效果 不設定高，且div中沒有內容，則高度預設為0。因此，一定要同時設定塊級元素的寬和高，這樣才能看出來效果。對於在乙個di...
CSS定位那點事兒
這幾日特別學習了定位的相關屬性和用法，懵逼了好久。說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。後面又來了定位，再次飄離了文件流。經過一番心思，理解，和試探，終究是有了些眉目。稍作整理，分享給大家共同 無論是浮動還...
css定位那點事兒
這幾日特別學習了定位的相關屬性和用法，懵逼了好久。說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。後面又來了定位，再次飄離了文件流。經過一番心思，理解，和試探，終究是有了些眉目。稍作整理，分享給大家共同 無論是浮動還...