1.使用絕對定位，top、right、bottom、left值相等，margin為auto
需要注意的是：top、left、right、bottom的值不一定要為0，只要保持這四者的值相等即可，另外，margin:auto;屬性也是必須的條件，否則無法實現效果
2.使用絕對定位，top、left的值為50%，對應的margin為元素寬高的一半
對於此思路的擴充套件，使用transform屬性的變形也能達到同樣的效果，即將上面的margin屬性替換成：transform:translate(-50%,-50%)即可
3.使用flex的相關屬性
但是這種思路的缺陷很明顯，就是必須要明確父級容器的高度
另外，利用此屬性的另外一種解決思路：
flex屬性在移動端使用起來極為便利，移動端首選這種方式
4.使用table相關屬性
此種方式能相容較低版本的ie瀏覽器，但是table布局早已過時
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...