[TOC] ## **实现元素的垂直水平居中** ### 方法一 ~~~ 父元素设置parent{position:relative;} 子元素设置 child{ position:absolute; left:50%; top:50%; margin-left:-50%*child*width; margin-top:-50%*child*height; } ~~~ ### 方法二 ~~~ parent{ position:relative; } child{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } ~~~ ### 方法三:flex布局 ~~~ 给父元素设置 display:flex; justify-content: center; align-items: center; ~~~ ### 方法四 ~~~ 父元素设置parent{position:relative;} 子元素设置 child{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); ~~~ ### 方法五：grid布局