對於特定的高度的彈框這個問題很好處理，計算好彈框離父元素的的高度，使用margin處理即可。
但是為了通用性，不必每一次都去計算，有沒有通用一點的方法呢，是有的, 通過vertical-aign來做。【也有其他絕對布局居中/flex布局居中的方法】
css **：
.container
.container:after
.dialog
.content
class需要配合line-height來使用="container"
>
class
="dialog"
>
class
="content"
>
內容佔位div
>
div>
div>
一般情況下，使用vertical-align:middle
vertical-align定義是元素的中線和字元x中心點對齊。1，因為container的
font-size設定為0，x中心點位置就是.container的上邊緣, 此時高度為100%的偽元素因為設定為inline-block並且vertical-align為middle，這個偽元素的中心點應該和.container的上邊緣對齊，這樣這個偽元素的上面一半肯定在.container元素的外面，但是css中預設是是左上方排列對齊的， 所以此時偽元素和.container的原本在容器上邊緣的x中心點，一起往下移動了半個容器的高度，也就是此時x中心點就在容器的垂直中心點上。【偽元素的目的就是為了將這個x中心點，擠壓到.container元素的垂直一半高度上】2，彈框元素.dialog 也 設定了
vertical-alignn:middle。根據定義，彈框的垂直中心位置和x中心點位置對齊，因為此時x中心點就在.container的垂直 中心位置，所以此時就實現了垂直居中效果。3，水平居中是
text-aign:center來實現的。x中心點，就是小寫字母x的高度一半的位置，小寫字母x的底部就是baseline基線。下圖來自：《css權威指南》第六章 - 垂直對齊vertial-align的middle位置就是基線往上 1/2 x-height高度。
這個例子來自於 張鑫旭《css世界》這本書5.3.8。
CSS實現元素水平居中 垂直居中 水平垂直居中
1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...
如何讓高度 寬度不定的容器保持水平 垂直居中
這個題目似乎解決的辦法很多，js是最能夠確保各種瀏覽器中一致性的，但是仍然可以使用css的方式來解決。這個問題分解為兩個方面，第一解決左右居中的問題，第二解決上下居中的問題。1 左右居中。左右居中最為簡單，使用 text align center 就可以讓絕大多數的物件居中對齊，並且這個屬性也獲得了...
如何讓高度 寬度不定的容器保持水平 垂直居中
這個題目似乎解決的辦法很多，js是最能夠確保各種瀏覽器中一致性的，但是仍然可以使用css的方式來解決。這個問題分解為兩個方面，第一解決左右居中的問題，第二解決上下居中的問題。1 左右居中。左右居中最為簡單，使用 text align center 就可以讓絕大多數的物件居中對齊，並且這個屬性也獲得了...