CSS水平垂直居中

水平居中有margin: 0 auto，但是開發中經常要用到垂直居中，現在來看下平時常用的方法有哪些

（也是最常見的，包括相對定位或絕對定位）

方法一有個很明顯的不足，就是需要提前知道元素的尺寸。否則margin負值的調整無法精確。為此，往往要借助js獲得。

css3的興起，使得有了更好的解決方法，就是使用transform代替margin. transform中translate偏移的百分比值是相對於自身大小的，於是，我們可以：

問題是css3的transform，相容性不好。需要ie9(-ms-), ie10+以及其他現代瀏覽器才支援。

margin:auto ，這樣的我們一般認為不生效的，至於為什麼可用，鑫大神有解釋

直接使用inline-block,其vertical-align不生效，必須使用偽元素，或者插入乙個隱藏元素

當然，不用偽元素也行，如下

我是用來撐開行高的

據說：flex 布局將成為未來布局的首選方案

some content

更多flex布局

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...

css實現水平居中 垂直居中 垂直水平居中布局

1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...