更多優(yōu)質(zhì)內(nèi)容請(qǐng)關(guān)注微信公眾號(hào) @web前端工程獅 每篇文章都會(huì)帶示意圖、詳解、代碼，關(guān)注我和我一起學(xué)前端~日常開(kāi)發(fā)的時(shí)候會(huì)碰到很多需要居中元素的場(chǎng)景，尤其對(duì)于強(qiáng)迫癥來(lái)說(shuō)，為了一點(diǎn)點(diǎn)偏差瘋狂手調(diào)margin（比如我自己），來(lái)講一下CSS中實(shí)現(xiàn)元素水平垂直居中的方法。

直接先上總結(jié)：Flex布局：父元素設(shè)置 display: flex，justify-content: center，align-items: centerGrid布局：父元素設(shè)置 display: grid，place-items: center…。