我來回答一下水平垂直居中的問題：
1.如果是只有水平居中，如果子元素是塊級(jí)元素：子元素設(shè)置display:block/table;margin: 0 auto;
2.如果只有水平居中，如果子級(jí)元素是行內(nèi)元素或者行內(nèi)塊元素，需要父級(jí)設(shè)置text-align:center;子級(jí)設(shè)置display: inline/inline-block;
3.如果只有垂直居中，而且父子元素不脫離標(biāo)準(zhǔn)流：
父元素設(shè)置display:table-cell;vertical-align: middle;
2和3一起，可以實(shí)現(xiàn)水平垂直居中
4.如果使用定位來實(shí)現(xiàn)水平垂直居中：
①如果已知子元素大小，可以設(shè)置子元素top: 50%; left: 50%; margin-top和margin-left為負(fù)的子元素大小的一半
②如果未知子元素大小，可以設(shè)置子元素top: 50%; left: 50%; transform: translate(-50%,-50%)
③如果已知子元素大小，還可以使用top: 0; left: 0; right: 0; bottom: 0; margin: auto;來實(shí)現(xiàn)（4個(gè)方向的margin都是auto，這個(gè)方法margin與子元素大小沒有關(guān)系）
5.使用flex
父元素display: flex;
主軸居中布局，父元素要用justify-content: center;
交叉軸居中布局： 父元素要用align-item: center;
兩個(gè)一起用，實(shí)現(xiàn)水平垂直居中布局。
我在時(shí)光機(jī)里找回憶 評(píng)論自面試了幾個(gè)前端，給爺整哭了！
