css居中方法

水平居中

• 內(nèi)聯(lián)：爸爸身上寫(xiě) text-align:center;
• 塊級(jí)：
  • margin-left: auto; margin-right: auto;
  • display:flex

垂直居中

七種方式實(shí)現(xiàn)垂直居中

1.table自帶功能

2.100% 高度的 afrer before 加上 inline block

3.div 裝成 table

4.margin-top -50%

5. translate -50%

6. absolute margin auto

7. flex

.parent{
    dispaly:flex;
    justify-content: center;
    align-item: center;
}

如果 .parent 的 height 不寫(xiě)，你只需要 padding: 10px 0; 就能將 .child 垂直居中；
如果 .parent 的 height 寫(xiě)死了，就很難把 .child 居中。
忠告：能不寫(xiě) height 就千萬(wàn)別寫(xiě) height。