今天,整理下css居中的解决：

水平居中

对于行内元素(inline)：text-align: center;

对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto

对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局

垂直居中

对于行内元素(inline)

单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等

多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素

对于块级元素(block)：下面前两种方案，父元素需使用相对布局

已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度

未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);

使用 Flexbox：选择方向，justify-content: center;

水平垂直居中

定高定宽：先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素回拉

高度和宽度未知：先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);

使用 Flexbox：justify-content: center; align-items: center;

欢迎各位童鞋分享自己总结的别的css居中的解决的方案，分享快乐，哈哈！