因為這一型別題目我面試的時候被問了很多遍，然後就想總結一下吧。大概分了幾類。
html**如下：
id="parent">
id="child">div>
div>
其樣式#container
#child利用絕對定位（其百分比是相對于父元素而言）和transform的translate屬性（其百分比是相對於其自身而言）
#container
#child
#container
#child
這裡就不貼**了，畢竟這麼簡單快捷的辦法，不會還好意思說做前端的？哈哈哈哈
第二類《適合只知道子元素的寬（實現水平居中）或者高（實現垂直居中）或者兩者都知道（水平垂直居中》
（1）使用絕對定位和margin（最簡單通用的辦法）
#container
#child
原理：通過配對設定top/bottom、left/right為0，再設定margin：auto即可
#container
#child
第三類《這種方法只需要知道父元素的高即可，而且這對ie6、ie7有效》
原理：為父元素設定乙個font-size值，其值為其高度除以1.14；再加上text-align：center。
為子元素設定inline/inline-block和vertical-align：middle即可
《這一類與設定display：table-cell這一種方法加起來就可以解決相容性問題的垂直居中了》
第四類《只是實現一邊居中的一些屬性》
（1）/* 不用知道子元素父元素元素的寬高，不過只能水平居中****************************************/
#child
（3）/* 將文字的line-height設定為父元素的高，可以實現垂直居中，不過只適合一行文字**********/
實現垂直水平居中的方法
1.定位 top 50 left 50 1 知道寬高的情況下margin left margin top 給個 1 2 寬高 2 不知道的請況 translate 50 50 2.flex display flex 1 水平方向 justify content center 2 垂直方向 align...
實現水平居中和垂直居中的方法
一 水平居中 1.text align center 行內元素 給其父元素設定屬性 text align center 2.margin 0 auto 塊級元素 給元素本身設定 margin 0 auto 3.元素的寬度固定 ele 4.元素的寬度不固定 ele 二 垂直居中 1.line heig...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...