之前寫前端頁面經常會遇到這個問題，所以抽了個時間總結了一下這些常用的方法，通常分為兩種情況來設定：已知寬高和未知。簡單的分享一下經驗。
position：absolute;，margin：auto;使用position的絕對定位和margin的居中定位 ，四個方向位置距離設定成一樣就行了（通過填充父元素的可用空間 ，子元素設定了寬高，那麼多餘的空間，被margin：auto平均分配的原理）：
//html**
class="box1">
class="box2">div+css設定水平垂直居中顯示
//css樣式**
.box1
設定 使用position的絕對定位和margin的居中定位，top和left設定與螢幕相距成50%，然後用transform向左（上）平移它自己寬度（高度）的50%即可：
.box1
設定 使用position的絕對定位和margin的居中定位，top和left設定與螢幕相距成50%，使用margin:高的一半px 0 0 寬的一半px;即可：
.box1
通過position的絕對定位和固定定位left和top都設定相對螢幕的50%距離，然後使用transform的translate負偏移來顯示：
//html
class="box1">
class="box2">div+css設定水平垂直居中顯示div>
div>
//css
.box2 執行結果：
通過css設定父元素為display: table，子元素為 display: table-cell，這種方法是讓元素包含的內容居中，但是會佔據整個父元素，因為子元素沒有設定寬高的，如下所示（紅線方框是設定寬高的父元素）：
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...
移動端水平垂直居中 盒子垂直水平居中方案
盒子垂直水平居中的需求在專案中可以說是非常常見的，我在開發過程中常用的以下幾種方法 首先，做一下基礎的布局 定位利用絕對定位使得盒子在父容器中水平垂直居中，是簡單有效的方法，在實際開發中用的很多 container box 但是這種方法在子元素寬高不確定的情況下就不適用了。由於 css3 的出現，有...
常見居中方式 （水平居中 垂直居中）
1.水平居中 1 子元素 margin 0 auto 2 使用絕對定位 父元素 position relative 子元素 position absolute left 50 transform translatex 50 3 父元素 text align center 子元素 display in...