CSS居中完全指南本文总结了CSS居中，包括水平居中和垂直居中。这篇文章相当于一个CSS决策树，下次遇到CSS居中问题有规律可循。参考CSS居中：完整指南和【基础】这15种CSS居中方法，你用过哪些？本文中的参考文献属于原作者。代码在线演示工具JSbin使用指南给需要居中的元素一个block父元素，需要居中的子元素是text或者inline,inline-block,inline-table,inline-flex核心代码.center-children{text-align:center;}JSbindemo地址效果：1.2块元素水平居中。父元素是block，子元素也是bolck，子元素设置了width（没有width的子元素继承父元素的width，居中没有意义）。无论是块级元素的宽度还是父元素的宽度是居中的，都可以。方法：子元素margin:0auto;设置左右边距自动填充核心代码。center-me{margin:0auto;}作用：块元素水平居中JSbin演示地址1.3多个块元素水平居中1.3.1多个块元素排成一行，水平居中。方法一：使用inline-block，原理是将子元素转化为inline-block。然后使用text-align:center;方法二：使用display:flex。注意：子元素的高度将保持不变。请参见下面的示例。核心代码：.inline-block-center{text-align:center;}.inline-block-centerdiv{display:inline-block;text-align:left;}.flex-center{显示:flex;justify-content:center;}效果：多个块元素排成一行并水平居中JSbindemo地址1.3.2多个块元素每行水平居中因为每个块元素占一行，所以方法还是margin：0自动；Demo：每行多个block元素，一个水平居中的JSbindemo2.Verticallyverticallycentered垂直居中比较麻烦2.1inlineorinline-*元素单行垂直居中需要垂直居中的元素是单行inline或者inline-*元素，比如一个文本或者一个链接（包括由链接改成的按钮）2.1.1方法一：使用相同的paddingupanddown（推荐）使用相同的paddingupanddownandleftandrightwithout设置宽高，可以在修改文字内容时自适应，也可以减少BUG的几率。核心代码：.link{padding-top:30px;padding-bottom:30px;}Demo:方法一：上下padding相同JSbindemo地址2.1.2方法二：设置line-height和sameheight核心代码.center-text-trick{height:100px;行高：100px；white-space:nowrap;/*nowrap文本中无效的换行内容只能在一行显示*/}设置行高t与高度相同JSbin演示地址2.2多行文字垂直居中。通过添加向上和向下填充，多行文本仍然有效且良好。建议不设置宽高使用。如果这还不行，那么文本所在的元素可能是一个table或者table-cell元素，不管是真正的table还是后面添加的CSS。再说说这两种情况下使用其他方法的垂直居中。2.2.1：方法一：展示：表格；和垂直对齐：中间；核心代码：.center-table{display:table;}.center-tablep{显示：表格单元格；vertical-align:middle;}table+vertical-align:middle多行文本垂直居中JSbinDemo2.2.2使用flex布局使多行文本居中一个flex-child可以简单地在flex-parent的中心。核心代码.flex-center-vertically{display:flex;证明内容：居中；弹性方向：列；height:400px;}使用flex多行文字居中JSbin演示地址2.3块元素垂直居中2.3.1已知块元素高度的原则是绝对定位，top:50%;然后margin-top设置为负边距，值为自己的高度核心代码的一半：.parent{position:relative;}.child{position:absolute;顶部：50%；高度：100px；边距顶部：-50px；/*如果不使用box-sizing，请考虑填充和边框：border-box；*/}注意：使用position:absolute;绝对定位会使元素脱离文档流已知块元素高度垂直居中演示2.3.2块元素高度未知垂直居中借助CSS3中的transform属性反转到Y轴偏移50%的方法实现垂直居中，但部分浏览器存在兼容性问题。核心代码：.parent{position:relative;}.child{position:absolute;顶部：50%；transform:translateY(-50%);}transformusageblockelementheightunknownverticalcenteringJSbindemo2.3.3usingflexlayoutblockUnknownelementheight垂直居中核心代码：.parent{display:flex;弹性方向：列；justify-content:center;}使用flex布局block元素高度未知垂直居中JSbindemo3.BothHorizo??ntallyandVertically水平和垂直居中3.1是定宽定高元素的核心代码：依然是绝对定位+半负边距宽度和高度.parent{position:relative;}.child{width:300px;高度：100px；填充：20px；位置：绝对；顶部：50%；左：50%；margin:-70px00-170px;}固定宽高的元素JSbindemo3.2不固定宽高利用2D变换在水平和垂直方向分别反转一半的宽度和高度，使元素水平和垂直居中。核心代码.parent{position:relative;}.child{position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}宽高不固定水平垂直居中JSbindemo3.3使用flex布局垂直水平居中核心代码：.parent{display:flex;证明内容：居中；align-items:center;}使用flex布局实现纵横居中JSbinDemo3.4使用grid布局实现纵横居中核心代码：body,html{height:100%;display:grid;}span{/*thingtocenter*/margin:auto;}使用flexlayout垂直和水平居中JSbindemo
