总之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;}演示程序：演示代码2.2多行元素垂直居中2.2.1使用表格布局（table）使用vertical-align：表格布局的中间可以实现子元素的垂直居中。核心代码：.center-table{display:table;}.v-cell{display:table-cell;vertical-align:middle;}演示程序：演示代码2.2.2使用弹性布局（flex）使用弹性布局实现vertical居中，其中flex-direction:column定义主轴方向为垂直。因为flex布局是在CSS3中定义的，所以在旧浏览器中存在兼容性问题。核心代码：.center-flex{display:flex;flex-direction:column;justify-content:center;}Demo程序：Demo代码2.2.3利用“幽灵元素”技术实现垂直居中，即放置一个100父容器中的%height伪元素，使文字和伪元素垂直对齐，从而达到垂直居中的目的。核心代码：.ghost-center{position:relative;}.ghost-center::before{content:"";display:inline-block;height:100%;width:1%;vertical-align:middle;}。ghost-centerp{display:inline-block;vertical-align:middle;width:20rem;}演示程序：演示代码2.3块级元素垂直居中2.3.1固定高度的块级元素我们知道高度和宽度居中元素的垂直居中问题很简单。垂直居中可以通过将元素绝对定位到距顶部50%并设置margin-top以向上偏移元素高度的一半来实现。核心代码：.parent{position:relative;}.child{position:absolute;top:50%;height:100px;margin-top:-50px;}演示程序：演示代码2.3.2当一个块级元素为unknownheight当垂直居中元素的高度和宽度未知时，我们可以使用CSS3中的transform属性将Y轴偏移50%来实现垂直居中。但是有些浏览器存在兼容性问题。核心代码：.parent{position:relative;}.child{position:absolute;top:50%;transform:translateY(-50%);}演示程序：演示代码3水平和垂直居中3.1固定宽高元素是horizo??ntalandverticalcentering通过将元素总宽度的一半按边距平移，将元素水平和垂直居中。核心代码：.parent{position:relative;}.child{width:300px;height:100px;padding:20px;position:absolute;top:50%;left:50%;margin:-70px00-170px;}演示程序:演示代码3.2未知宽高的元素水平和垂直居中使用2D变换，在水平和垂直方向分别平移一半宽度和高度，使元素水平和垂直居中。核心代码：.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}Demo程序：demo代码3.3使用flex布局使用了flex布局，其中justify-content用于设置或获取弹性盒子元素在主轴（横轴）上的对齐方式；而align-items属性定义了flex子容器当前行的横轴（纵轴）方向对齐。核心代码：.parent{display:flex;justify-content:center;align-items:center;}演示程序：演示代码3.4使用grid布局，使用grid实现水平和垂直居中，兼容性差，不推荐。核心代码：.parent{height:140px;display:grid;}.child{margin:auto;}演示程序：演示代码3.5屏幕水平和垂直居中屏幕水平和垂直居中是很常见的，也是必须的用于常规登录和注册页面。为了保证更好的兼容性，还需要使用表格布局。核心代码：.outer{display:table;position:absolute;height:100%;width:100%;}.middle{display:table-cell;vertical-align:middle;}.inner{margin-left:auto;margin-right:auto;width:400px;}Demoprogram:Democode4说明中提到的文字和代码都是在网上编译的。由于时间不够、能力有限等原因，存在文字描述不准确、代码测试不够充分等诸多问题。因此，仅限于研究范围，不适合实际应用。本文介绍的方案只是居中方案的一部分，并非全部。另外涉及CSS3的flex、transform、grid等代码存在兼容性问题。
