在前端開發過程中，盒子居中是常常用到的。其中 ，居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設定元素的margin: 0 auto就可以實現。但是垂直居中相對來說是比較複雜一些的。下面我們一起來討論一下實現垂直居中的方法。
首先，定義乙個需要垂直居中的div元素，他的寬度和高度均為300px，背景色為橙色。**如下：
很好，已經實現水平居中了！接下來該打大boss了——實現垂直居中。不過，在這之前，我們先要設定div元素的祖先元素html和body的高度為100%（因為他們預設是為0的），並且清除預設樣式，即把margin和padding設定為0（如果不清除預設樣式的話，瀏覽器就會出現滾動條，聰明的親，自己想想問什麼）。
通過觀察上圖，只要讓div的中心移動到紅線的位置，那麼整個div就居中了。那怎麼讓它中心移動到紅線處呢？從圖中可以觀察到，從div的中心到紅線的距離是div自身高度的一半。這時候，我們可以使用通過margin-top屬性來設定，因為div的自身高度是300，所以，需要設定他的margin-top值為-150。為什麼是要設定成負數的呢？因為正數是向下偏移，我們是希望div向上偏移，所以應該是負數，如下：
確實已經居中了。好興奮！有木有？！
除了可以使用margin-top把div往上偏移之外，css3的transform屬性也可以實現這個功能，通過設定div的transform: translatey(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。如下：
效果：
除了上面3中方法之外，當然可能還存在許多的可以實現垂直居中的方法。比如可以將父容器設定為display:table ，然後將子元素也就是要垂直居中顯示的元素設定為 display:table-cell 。但是，這是不值得推薦的，因為會破壞整體的布局。如果用table布局，那麼為什麼不直接使用table標籤了？那不更加方便嗎？
元素垂直居中
1 單行文字的居中 主要實現css 水平居中 text align center 垂直居中 line height xxpx line height與元素的height的值一致 我們先來看這樣乙個例子，加入我們這裡有乙個div，寬度和高度為300px，背景顏色為黑色，然後在div中有一行簡短文字，我...
前端元素垂直水平居中的多個方法
建立乙個bfc，高度坍塌 居中 margin重合問題均可解決 1 浮動元素float不為none 2 絕對定位或固定定位 position absolute fixed 3 行內元素 display inline block 4 overflow不為visible的塊級元素 5 display值為f...
前端頁面中元素的水平垂直居中對齊
這是最簡單的，直接在元素屬性中使用text align center 讓文字水平居中，再通過行高 line height 元素的高度 讓文字垂直居中對齊 html布局 css樣式 效果展示 注意點 text align是對塊元素的特質，內部必須是行內元素等，如果裡面div也想水平居中，可以設定dis...