總結

在我們設計網頁的過程中，經常需要一些dom元素在其父元素或者相對于網頁是水平垂直居中的，例如：登錄頁面讓登錄窗口居中顯示，以下是我總結的幾種常用方法。

本題考察：css的靈活運用

第一種方法：使用絕對定位實現

css如上圖所示，先將inner的父元素相對定位（position：relative；），再將inner水平居中（margin： auto；），然后對inner進行在父元素wraper中絕對定位（position： absolute；），并將其top、right、bottom、left屬性設置成0，從而實現inner在wraper中的水平垂直居中。

第二種方法：使用display:flex實現

這種方法面試當時也是沒有想到，面試的hr也提醒了我使用flex，但是確實沒有實際操作過這個屬性，實現的css代碼如下：

該方法先將inner的父元素display屬性設置成flex，再將inner的margin屬性設置成auto，這里相當于（margin：auto auto；），可以將其簡寫成（margin：auto；），但是前提是其父元素display屬性為flex。

第三種方法：使用負margin法實現（推薦：兼容性最好）

css代碼如上圖所示，先將inner父元素進行相對定位（position：relative；），再將inner進行絕對定位（position： absolute；），然后使用（top：50%；left：50%；）將inner這個div的左上頂點定位在wraper的正中央，之后通過負margin法將inner向左上方移動實現inner的水平垂直居中。

ps：此方法前提知道尺寸

第四種方法：使用css3中transform屬性實現

此方法與負margin法有著異曲同工之妙，css代碼如下：

該方法與負margin法極其相似，先將兩個div定位，也是將inner這個div左上頂點定位在wraper的中心點，然后使用transform下的translate屬性將inner向左上方移動，從而實現效果。

作者：孫以哲

未完，待續