一、水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定。

  • 行内元素：对父元素设置text-align: center;

  • 块元素定宽：设置左右margin值为auto；

  • 块元素不定宽：设置子元素display:inline,从而转换成行内元素的解决方案，在父元素上设置text-align：center；

  • 通用方案：flex布局，对父元素设置display:flex;justify-content:center;

二、垂直居中

子元素是单行内联文本、多行内联文本还是块状元素。

  • 父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height

  • 父元素一定，子元素为多行内联文本：设置父元素的display: table-cell 或 inline-block，再设置vertical-align: middle

  • 块元素：设置子元素position: fixed(absolute),然后设置margin: auto

  • 通用方案；flex布局，给父元素设置display:flex;align-items:center;