总之CSS居中是前端工程师经常面临的问题，也是基本功之一。今天有空整理整理了CSS居中方案。目前有水平居中、垂直居中、水平垂直居中等15种方案。如有遗漏，会陆续补充。它可以被视为一个备忘录。1水平居中1.1内联元素水平居中使用text-align:center实现块级元素内部的内联元素水平居中。此方法对行内元素、行内块、行内表和行内柔性元素的水平居中有效。核心代码：.center-text{text-align:center;}演示程序：演示代码1.2块级元素水平居中通过将定宽块级元素的margin-left和margin-right设置为auto，block-level元素水平居中。核心代码：.center-block{margin:0auto;}演示程序：演示代码1.3多块级元素水平居中1.3.1使用inline-block如果一行中有两个或多个块级元素，设置块级元素的显示类型为inline-block和父容器的text-align属性，使多块级元素水平居中。核心代码：.container{text-align:center;}.inline-block{display:inline-block;}演示程序：演示代码1.3.2使用display:flex并使用弹性布局（flex）实现水平居中，其中justify-content用于设置柔性盒元素在主轴（横轴）方向的对齐方式。本例中子元素设置为水平居中显示。核心代码：.flex-center{display:flex;justify-content:center;}演示程序：演示代码2垂直居中2.1单行内联（inline-）元素通过设置内联元素的高度（height）与行高（line-height）相等来实现垂直居中,以便元素垂直居中。核心代码：#v-box{height:120px;line-height:120px;}Demoprogram:Democode2.2多行元素垂直居中2.2.1使用表格布局(table)可以使用vertical-align:middleoftablelayout实现子元素垂直居中。核心代码：.center-table{display:table;}.v-cell{display:table-cell;vertical-align:middle;}演示程序：演示代码2.2.2使用弹性布局（flex）使用弹性布局实现垂直居中，其中flex-direction:column定义主轴方向为垂直。因为flex布局是在CSS3中定义的，所以在旧浏览器中存在兼容性问题。核心代码：.center-flex{display:flex;弹性方向：列；justify-content:center;}Demoprogram:Democode2.2.3使用“幽灵元素”技术实现垂直居中，即在父容器中放置一个高度为100%的伪元素，让文字和伪元素元素垂直对齐，从而达到垂直居中的目的。核心代码：.ghost-center{position:relative;}.ghost-center::before{content:"";显示：内联块；高度：100%；宽度：1%；垂直对齐：中间；}。幽灵中心p{显示：内联块；垂直对齐：中间；width:20rem;}Demoprogram:Democode2.3块级元素垂直居中2.3.1固定高度的块级元素我们知道居中元素的高度和宽度，垂直居中的问题就很简单了。垂直居中可以通过将元素绝对定位到距顶部50%并设置margin-top以向上偏移元素高度的一半来实现。核心代码：.parent{position:relative;}.child{position:absolute;顶部：50%；高度：100px；边距顶部：-50px；当垂直居中元素的高度和宽度未知时，我们可以使用CSS3中的transform属性将Y轴偏移50%来实现垂直居中。但是有些浏览器存在兼容性问题。核心代码：.parent{position:relative;}.child{position:absolute;顶部：50%；transform:translateY(-50%);}Demoprogram:Democode3水平和垂直居中3.1固定宽度和高度的元素水平和垂直居中通过平移元素总宽度的一半边距来使元素水平和垂直居中。核心代码：.parent{position:relative;}.child{width:300px;高度：100px；填充：20px；位置：绝对；顶部：50%；左：50%；margin:-70px00-170px;}Demoprogram:Democode3.2未知宽高的元素水平和垂直居中使用2D变换在水平和垂直两个方向平移一半宽度和高度相反的方向，所以元素水平和垂直居中。核心代码：.parent{position:relative;}.child{position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}Demoprogram:Democode3.3使用flex布局使用flex布局，其中justify-content用于设置或获取弹框元素在主轴上的对齐方式（横轴）;而align-items属性定义了flex子容器当前行的横轴（纵轴）方向对齐。核心代码：.parent{display:flex;证明内容：居中；align-items:center;}Demoprogram:Democode3.4使用grid布局使用grid实现水平和垂直居中，兼容性差，不推荐。核心代码：.parent{height:140px;display:grid;}.child{margin:auto;}演示程序：演示代码3.5屏幕水平和垂直居中屏幕水平和垂直居中是很常见的，经常使用的登录和注册页面需要。为了保证更好的兼容性，还需要使用表格布局。核心代码：.outer{display:table;位置：绝对；高度：100%；宽度：100%；}.middle{显示：表格单元格；vertical-align:middle;}.inner{margin-left:auto;右边距：自动；width:400px;}Demoprogram:Democode4讲解中提到的文字和代码部分编译自网上。由于时间不够、能力有限等原因，存在文字描述不准确、代码测试不够充分等诸多问题。因此，仅限于研究范围，不适合实际应用。本文介绍的方案只是居中方案的一部分，并非全部。另外涉及CSS3的flex、transform、grid等代码存在兼容性问题。想了解更多CSS技巧，可以关注我的博客：CODECOLOR
