元素居中对齐方法汇总

经常对遇到关于文本、图标以及两者之间对齐的问题，要找到解决方法，应该先理解css相关属性的原理而不是死记硬背方法：

水平方向：

下面给出几种方案和基本原理：
- text-align：
  
  这个属性是控制元素内的**文本（包括图标）**在水平位置上如何对齐，也就是说它不控制元素本身如何对齐，而是元素内的文本如何对齐；
  
  该属性的默认值一般是left，使用center能使文本居中，即文本的首尾分别离元素左右边框的距离相等：
```
.box{
  text-align: center;
}
```
- margin：
  
  这个属性是利用元素盒子模型的外边距自动分配机制实现居中效果的，也就是说对于固定宽度的**块级元素，**设置左右外边距为auto时浏览器会将左右、上下外边距平均分配，因此，不同于前面两个属性，这个属性是会对整体布局有影响的：
```
.text{
  margin: 0 auto;
}
```
- 弹性盒子：
  
  justify-content这个属性原本是用于调整弹性盒子内元素如何排列的，所以需要同时将该元素设置为弹性盒子：
```
.box{
  display: flex;
  justify-content: center;
}
```
- 绝对定位
  
  这个方法则是通过文本相对在盒子内的位置，进行水平调整实现的居中：
```
.text{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
```
- 网格布局：
  
  类似于弹性盒子布局，利用网格布局中的特有属性place-items对元素即文字进行居中对齐：
```
.container {
    display: grid;
    place-items: center;
}
```
垂直方向：

对于垂直方向有几个概念需要搞清楚：
- 文本中线：
  
  css中没有明确定义这个概念，但是为了方便区分文本基线的定义并解释后面的概念，所以提出这个概念。文本中线就是将文字的大小均分，距离上边和下边都相等的一条线。比如，文本大小是18px，那么文本中线就在距离文本顶部边缘和文本底部边缘都是9px的位置。
- baseline：文本基线
  
  一般来说，对于英文基线位置就是字母x的底边缘，而中文对基线的位置没有并且的定义。但是不论是中文还是英文，文本基线都会比文本字面下缘高一点：
- line-height：
  
  是指给文本框出一个高度，类似于单行本的两条行线。设置该值，能将文本上下平均的放在这个框内，也就是说文本中线和这个文本框的水平中线对齐。
  - 如果文字大小大于该值，超过部分会无法显示；
  - 如果文字大小小于该值，那么文本的上下边缘离这个文本框的上下边的距离是相等的。
  所以，一般可以通过将文字的line-height设置为外部盒子的高度一样来实现居中：
```
.box{
  height: 40px;
}
.text{
  font-size: 18px;
  line-height: 48px;
}
```
- vertical-align
  
  这个属性的作用是通过参照baseline、外部盒子元素的顶部和底部的位置对元素位置进行调整的，查看可用值：
  
  通常，这个属性可以用于结局图标和文字的对齐问题。因为图标的基线和文本的基线是一样的，但是图标底边缘不会比基线低一点，而是刚好对齐基线，所以经常会出现下图的微小参差：
  
  使用vertical-align可以就可以解决该问题：
```
.icon{
  vertical-align: sub;
}
```
  效果如下图：
其他的一些可以用于调整垂直居中的方法：
- 绝对定位：
```
.element {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
```
- 弹性盒子：
```
.box {
    display: flex;
    align-items: center;
}
```
- 表格布局：
```
.box {
    display: table;
}

.text {
    display: table-cell;
    vertical-align: middle;
}
```
- 网格布局：
```
.container {
    display: grid;
    place-items: center;
}
```

‍

实践记录笔记一 | 青训营

元素居中对齐方法汇总