在頁面布局中，經常會面臨垂直水平居中問題。網路上有很多方法，但是大多數情況下，我們找到合適的解決方法後，複製貼上了事，並沒有對各種方法的原理、利弊進行研究。本著「雙鳥在林，不如一鳥在手」的宗旨，從各種方法中找出一種簡單易懂的方法，讓大家一目了然，以後再遇到也能立即想出來。
1、水平居中：
使div02在div01中水平居中。
``````
```#div02
```原理： 首先，div02作為塊級元素會充滿div01，即二者寬度相等。如果div02在div01中居中，那麼div02的寬度應小於div01的寬度，所以應先設定好div02的寬度（width: 200px;）。設定好寬度後，利用元素的左右外邊距使其水平居中。當div02居中時，兩側的外邊距應相等，所以設定左右外邊距為auto（margin: 0 auto;），div02會自動計算左右外邊距使自己居中。
2、垂直居中
使div02在div01中垂直水平居中。
``````
```#div01
#div02
```原理：使用絕對定位（position: absolute）結合負外邊距實現。定位之前設定好div02的尺寸，再對div02相對於div01左上角進行絕對定位（前提是其父元素div01設定position:absolute;），top:50%;left:50%，此時div02的左上角處於div01中心，而不是div02垂直水平居中，需要用負外邊距進行調節。將marjin-top設定為div02的height的一半的負值（- height/2），將marjin-left設定為div02的width的一半的負值（- width/2），即是將div02的中心向div01的中心移動，二者重合後div02也就垂直水平居中了。
這種方法是水平居中、垂直居中兩種效果同時實現，也可以根據需要實現某一種效果。
常見居中方式 （水平居中 垂直居中）
1.水平居中 1 子元素 margin 0 auto 2 使用絕對定位 父元素 position relative 子元素 position absolute left 50 transform translatex 50 3 父元素 text align center 子元素 display in...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...
實現水平居中垂直居中
熟悉水平居中和垂直居中的方法,不為別的,就為用的時候能夠信手拈來.下面直接步入正題.原文 16種方法實現水平居中垂直居中 1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 f...