CSS居中的几种方式

居中在 CSS 中用的也比较常见，总结几种自己比较熟悉的居中的写法。当然，肯定还有更多更不错的写法，对于文中不足的地方也欢迎指正。
假设现在给出这种场景：

DEMO

其中在 class=‘child’ 这个 div 中的内容长度是不一定的，现在需要实现这个 div 的居中。
水平居中1.1 display: inline-block在块级父容器中让行内元素或者类行内元素居中，只需使用 text-align: center，这种方法可以让 inline/inline-block/inline-table/inline/flex 居中。.child { display:inline-block; / 子元素文字会继承居中，因此要在上面写上向左边居中/ text-align:left;}.parent { text-align:center;}当有多个 child div 的时候如果设置 display: inline-block 的时候需要注意每个 div 之间会有缝隙，这不是什么 bug ，特性就是如此。。如果想去掉这些缝隙的话，有几种解决方法：
1.去掉 HTML 中的空格。元素之间留白间距出现的原因是因为标签段之间的空隙，这个时候只需要去除掉 HTML 之间的空隙就好了。比如这种写法，当然写法也有很多种，只要保证把空隙去掉就可以了，但是这种方法总觉得写起来有点反人类。

DEMO1

DEMO2

DEMO3

2.使用 margin 负值这种方法这个负的值不太好确定，和上下文的字体等等都有关，这种方法不太适合大规模的使用。.child { margin-right; -5px;}
3.使用 font-size: 0这种方法能十分简单地这个间距问题，只需要将父 div 的 font-size 设为0 ，然后记得将子 div 的 font-size 属性设置回来即可。.parent { font-size: 0;}.chilc { font-size: 16px;}
4.使用 letter-spacing 或者 word-spacing.parent { letter-spacing: -5px; / 或者/ word-spacing: -5px;}.chilc { letter-spacing: 0; / 或者/ word-spacing: 0;}