探索CSS单行文字居中，多行文字居左的实现方式

样式如下。内容{文本对齐：居中；}.文本{显示：内联块；text-align:left;}这个方法最早是在《CSS世界》学习的是的，总的原则是这样的：对于一个元素，如果它的display属性值为inline-block，那么它的宽度由元素内部决定，但总是小于“包含块”容器的尺寸，即是，“收缩以适合）”可能不够直观。上面的例子，当文字比较小时，.text的宽度跟在文字后面，这时我们可以使用父级text-align:center来让一个inline-block元素居中，这样就可以满足居中a的效果单行文本。当文本较多时，.text的宽度跟随父容器。由于text-align:center会被继承，所以可以在.text上修复。看到PenCompatibility是一流的~2.width:fit-content+margin:auto上面的方法通过parenttext-align:center实现了inline-block的居中，很巧妙，但是增加了额外的标签，因为inline-block元素本身不能居中block-levelblock元素可以在设置宽度后直接通过margin:0auto居中，但是必须指定宽度，否则会水平填充。两人的关系非常微妙。有什么方法可以使块级块元素的宽度像内联一样-内部元素后面的块元素呢？答案是宽度：适合内容。详情请参考这篇文章。居中效果就起来了。下面的实现方式只需要一个单层标签这个文本是否可以这样判断，当文本不足一行时，让其居中显示，当文本超出时一行，让它放在左边

.text{width:fit-content;width:-moz-fit-content;//Firefox需要-moz-prefixmargin:0auto;}看Pen当然IE肯定不支持这个功能~3.position:relative+transform还是需要设置display:inline-block实现自适应，再配合transform实现水平居中效果，也很简单~.text{display:inline-block;位置：相对；左：50%；transform:translateX(-50%);}看Pen4.display:table+margin:auto前一种方法width:fit-content很有效，IE不支持怎么办？事实上，默认显示已经具有此功能。当display属性值为table时，元素会显示width:fit-content的效果，不仅支持宽度跟随内部元素，还支持水平边距居中。text{display:table;margin:0auto;}看到PenIE8也完美支持~5。flex和grid的实现对于flex和grid来说，实现这样的效果是相当容易的。在flex容器中，所有的子项都变成了弹性项，包括纯文本节点（匿名盒），就像包裹了一层一样，所以通过justify-content:center很容易实现居中，同时（匿名盒)也遵循文本自适应宽度，当超过一行时，遵循默认的文本对齐方式。网格是一样的，只是对齐需要通过justify-items:center。fleximplementation.text{显示：flex;justify-content:center;}参见Pengridimplementation.text{display:grid;justify-items:center;}看到Pen和flex相比grid兼容性差，所以尽量选择flex方式，至少移动端和IE10（需要-ms-）是没问题的。6.float的实现我以为float实现不了。感谢林小智提供浮动居中的实现方法。大体原则如下：浮动元素本身具有包裹特征，主要难点在于如何居中。毕竟没有float:center这种写法。这里主要使用两层标签，通过position:relative;left:50%正负偏移来实现。content{position:relative;向左飘浮;left:50%;/**父设置50%**/}.text{position:relative;向左飘浮;left:-50%;/**childsetting-50%**/}SeeThePen有点繁琐，但不失为一种方法，兼容性也极佳。综上所述，上面列举了8种实现方式。当然，第一种方法是实验性的，兼容性较差，但也是一种思路。你是怎么想到这些方法的？第一个是联想。比如上面提到的自适应（简单来说就是大小由内容决定），不知道有哪些可以实现自适应？除了inline-block，还有float、position:absolute、display:table等……首先排除float。元素设置为浮动后，整体居中其实是一件比较麻烦的事情，几乎不可能（经过实验，可以实现）。position:absolute还是很有前途的。用left:50%;transform:translateX(-50%)，可以达到居中的效果。试了之后发现宽度不能适配parent的宽度，也失败了（也许可以，只是没想到）~~最后还是选择了diaplay:table，也算是一个循序渐进的过程。flex和grid就更不用说了，天生就是为灵活布局而生的，能达到这样的效果也就不足为奇了。二是基础。CSS属性就那么多，只是停留在表面，很多看似无关紧要的属性在整个系统中却有着一些微妙的关系，比如上面的width:fill-content，单独来看肯定是鸡肋，而且可以可以改用Inline-block，但是他可以让一个普通的div元素具有inline-block的特性，不得不佩服CSS的设计~（肯定有设计师参与）前段时间想做一个可视化的编辑工具，希望能够通过一些属性，就像photoshop一样，可以直接制作页面。想一想，发现只能创建最基本的样式，比如颜色和尺寸。是的，除了你自己在做开发，别人怎么知道这个设置？可视化编辑工具还有很长的路要走，前端用户不用担心被其他“一键生成工具”取代~小伙伴们，如果有其他实现方法欢迎留言下面，文章中如有错误请及时指出，谢谢~