水平居中

场景一：子元素是行内元素，子元素宽度是由其内容撑开的

解决方案：给父元素设定 text-align:center;

场景二：子元素是块级元素且宽度已经设定

解决方案：

• 方案一: 给子元素添加margin:0 auto;
• 方案二：通过子元素相对父元素绝对定位，给子元素设置： left:50%; margin-left: -子宽一半 或 transform:translateX(-50%)
• 方案三：弹性布局，给父元素设置： display:flex;flex-direction: row;justify-content:center;

垂直居中

场景一：子元素是行内元素，高度是由其内容撑开的

解决方案：

• 单行: 设定父元素的line-height为其高度来使得子元素垂直居中
• 多行: 通过给父元素设定display:inline/inline-block/table-cell; vertical-align:middle来解决

场景二：子元素是块级元素但是子元素高度没有设定

解决方案：

• 方案一：通过给父元素设定display:inline/inline-block/table-cell; vertical-align:middle来解决
• 方案二：felx布局给父元素设定display: flex; flex-direction: column;justify-content: center;

场景三：子元素是块级元素且高度已经设定

解决方案：

• 方案一：利用绝对定位，让子元素相对于父元素绝对定位，子元素设定top:50%; transform:translateY(-50%)或 margin-top: -子高一半
• 方案二：利用flex父元素设定：display: flex;flex-direction: column;justify-content: center;

垂直和水平同时居中

情景一：已知子元素宽高

解决方案：

• 方案一：父相子绝，子元素设定：top:50%; left:50%; margin-left:-子宽一半; margin-top:-子高一半
• 方案二：父相子绝，子元素设定：top:50%; left:50%; transform:translate(-50%, -50%)；
• 方案三：flex布局

情景二：未知子元素宽高

解决方案：

• 方案一：父相子绝，子元素设定：top:50%; left:50%; transform:translate(-50%, -50%)；
• 方案二：flex布局