第一，水平中心
内嵌元素：查看父元素是否为块级元素；如果是，为父元素设置text-align:居中；如果没有，首先设置父元素：display:block；(看具体布局，以免影响其他元素的显示)设置文字-对齐：居中；块元素：普通花：
固定宽度：余量： 0自动；宽度不确定：设置子元素显示：内嵌-块/内嵌；即转换为内嵌块级/内嵌元素，父元素设置为text-align:居中；方案二：使用定位属性
固定宽度：父元素设置相对位置：子设置位置：绝对；左侧：50%；左边距-:-子元素宽度的一半；宽度可变的父元素：设置相对位置：子设置位置：绝对；左侧：50%；transform : translateX(-50%)；方案三：使用flexbox布局实现
为父元素设置display: flexjustice-content : center；
二、垂直居中
行内元素：只需将子元素的行高设置为等于父元素的行高；为父元素设置display:表；子设置显示：表格单元格；垂直对齐：中间；带有块状元素的普通花卉：使用定位
高度：父元素被设置为相对位置：子设置位置：绝对；top : 50%；边距-top :-子元素宽度的一半；宽度可变的父元素：设置相对位置：子设置位置：绝对；top : 50%；transform : translateY(-50%)；选项2:使用弹性框布局
为父元素设置display: flexalign-items:居中；第三，水平垂直居中
1.已知宽度和高度
普通花：
相对于父元素设置位置：为子元素设置position:绝对值；top : 0；bottom : 0；left : 0；right : 0；margin: auto
备选方案2:
相对于父元素设置位置：为子元素设置position:绝对值；top : 50%；左侧：50%；左边距-:-子元素宽度的一半；margin-top :-子元素高度的一半；
2.未知宽度和高度
普通花卉：使用方向
相对于父元素设置位置：为子元素设置position:绝对值；top : 50%；左侧：50%；transform : translateX(-50%)translateY(-50%)；
选项2:使用弹性布局
设置父元素display: flexjustice-content : center；align-items:居中；