一些居中方式的总结

居中

对于子元素是行内元素(或者inline-block)时使用​<code>​text-aling: center;​</code>​ ,父元素宽度无论确定不确定,均可实现相对于父元素水平居中。

对于子元素时块级元素时，使用外边距设置进行水平居中

效果和上图一样

块级元素里的文字垂直居中

对于块级元素来说，它的高度在没有显示设置的情况下，是由子元素高度撑开的，所以对于子元素是内联元素的可以采取对父元素进行设置padding来进行垂直居中

子元素宽高确定

使用子元素margin进行居中

子元素宽高不确定

使用定位加margin 居中

使用transform 来实现居中

当子元素是一个图片时,父元素使用text-align:center; 子元素设置vertical-align: middle;，且用父元素的伪元素等同父元素高度后设置为vertical-align:middle;

对父元素设置为table-cell来实现居中，需要设置宽高

flex 布局，使用主轴和侧轴的对齐方式来实现居中

如有错漏，欢迎指正。