CSS居中技巧是前端开发者不可或缺的核心技能之一，它涵盖了从简单的水平居中到复杂的垂直居中乃至水平垂直同时居中的多种实现方式。今天，我整理并汇总了15种不同的CSS居中方案，这些方案覆盖了常见的布局需求。

一、 内联元素水平居中

利用 text-align: center; 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

核心代码：

.center-text {    
  text-align: center; 
}

二、 块级元素水平居中

通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。

核心代码：

.center-block {     
 margin: 0 auto; 
 }

三、多块级元素水平居中

 利用inline-block
如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

核心代码：

.container {     
 text-align: center;  
} 
 .inline-block {     
 display: inline-block; 
 }

四、利用display: flex

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。

核心代码：

.flex-center {     
 display: flex;   
 justify-content: center; 
 }

五、 垂直居中

单行内联(inline-)元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

核心代码：

#v-box {      
height: 120px;      
line-height: 120px;  
}

六、 多行元素垂直居中

利用表布局（table）
利用表布局的vertical-align: middle可以实现子元素的垂直居中。

核心代码：

.center-table {      
display: table;  
}  
.v-cell {      
display: table-cell;      
vertical-align: middle;  
}

七、 利用flex布局（flex）

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。

核心代码：

.center-flex {      
display: flex;      
flex-direction: column;      
justify-content: center;  
}

八、 利用“精灵元素”

利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐。

核心代码：

.ghost-center {      
position: relative;  
} 
 .ghost-center::before {      
content: " ";      
display: inline-block;     
 height: 100%;      
width: 1%;      
vertical-align: middle;  
}  
.ghost-center p {      
display: inline-block;      
vertical-align: middle;      
width: 20rem;  
}

九、 块级元素垂直居中

固定高度的块级元素
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。

核心代码：

.parent {      
position: relative;  
}  
.child {      
position: absolute;      
top: 50%;      
height: 100px;      
margin-top: -50px;   
}

十、 未知高度的块级元素

利用CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。

.parent {      

position: relative;  

} 

.child {      
position: absolute; 
top: 50%;     
transform: translateY(-50%); 

 }