CSS - 利用 vertical-align:middle 垂直居中元素容器

向右看齐 2023-03-04 06:43 15阅读 0赞

## 前言 ##

以前总是以为 `vertical-align` 与 `text-align` 是同样的道理，**一个是垂直居中，一个是水平居中。**

## vertical - align ##

`vertical-align` 属性设置元素的垂直对齐方式，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值。

这会使元素降低而不是升高，在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

> **【第一种用法】：** 先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的 td 加一个 vertical-align:middle 的样式，表格里面的内容会垂直居中，同样的如果给一个 vertical-align:bottom 就会底部对齐，如果给一个 vertical-align:top 就会顶部对齐。

> **【第二种用法】：** 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素 a 和 b ，a 和 b 都是 div，当 a 加了一个 vertical-align:middle 样式之后， b 的底部（基线）就会对齐 a 的中间位置，如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]

> 如果 a 和 b 都加了一个 vertical-align:middle 样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]

> 现在我要让 class=“box” 的 div 在 class=“wrapper” 的 div 里面垂直居中，我可以在 class=“wrapper” 的 div 里面加一个 div 空标签，把它的高度设为 100%，宽度设置为 0，再给它一个 vertical-align:middle 样式，同样的给 class=“box” 的 div 一个 vertical-align:middle 样式，那么 box 就可以在 div 里面垂直居中了。

.wrapper{ 
       width: 500px;
       height: 500px;
       background-color: pink;
       text-align: center;
    }
    
    .box{ 
       width: 100px;
       height: 100px;
       background-color: deepskyblue;
       display: inline-block;
       vertical-align: middle;
       margin: 0 auto;
    }
    
    .help{ 
       width: 0;
       height: 100%;
       display: inline-block;
       vertical-align: middle;
    }

**效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: /images/20230208/35636ea34af84534a16cffb9240ca980.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/a160a232c99645ada2b9004075a0cb72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/9d5b322a9cb944649ffc975938b601cd.png