如何使CSS中浮动元素垂直对齐？

这个事情挺麻烦的， 主要原因是 float 本身是不支持垂直对齐的，它的目的是让文字环绕图片啥的， 事实上... 而不是用来搞布局对齐的。但是呢，你要是非要弄，也不是完全没办法。

1. 使用 line-height 属性

如果你浮动的是个包含文本的块， 而且容器的高度是固定的，那么你可以试试把 line-height 设置成和容器高度一样，这样文本就垂直居中了。

.container {  height: 50px;  line-height: 50px;}
.floating-text {  float: left;  line-height: 50px; /* 与父容器高度一致 */}

这个方法简单粗暴， 但是有局限性，如果你的浮动元素不是文本，或者容器的高度不是固定的，那就不好使了，你我共勉。。

2. 使用 vertical-align 属性

vertical-align 这个属性对纯浮动元素是无效的， 但是如果你把元素改成 display: inline-block然后再用 vertical-align: middle就可以实现垂直对齐了，希望大家...。

.wrapper {  font-size: 0; /* 消除 inline-block 间的空白 */}
.box {  display: inline-block;  vertical-align: middle;  width: 100px;  height: 100px;  font-size: 16px;}
.image {  float: none;}

来日方长。 注意哦， 这样一来你就不用 float 了而是用 inline-block 来替代它，这样更适合做垂直对齐。

3. 使用 Flexbox 或 Grid 布局

太水了。 如果你原本就是为了布局而使用 float， 那么我建议你直接改用 Flexbox 或者 Grid，它们原生就支持垂直对齐，用起来更方便。

.flex-container {  display: flex;  align-items: center; /* 垂直居中 */  height: 200px;}
.flex-item {  /* 不再需要 float */}

这种方式更简洁， 也更容易控制，不用再清除浮动啥的，省事多了，让我们一起...。

4. 使用 transform 属性

抓到重点了。 如果非要用 float， 你还可以通过相对定位和 transform: translateY 来微调浮动元素的位置，实现垂直对齐的效果。

.floated-element {  float: left;  position: relative;  top: 50%;   transform: translateY;}

大体上就这些方法。虽然 float 本身不支持垂直对齐，但通过各种技巧还是可以实现所需效果。现代开发中建议优先使用 Flexbox 或 Grid 布局替代 float 做对齐。 如果你原本是为了布局而使用 float， 建议改用 Flexbox它原生支持垂直对齐。 奥利给！ 在 CSS 中， 浮动元素本身并不直接支持垂直对齐，主要原因是 float 的设计初衷是让文本环绕图片等实现“文字环绕”效果，而不是用于布局对齐。但如果你需要调整浮动元素的垂直对齐，可以通过以下几种方式间接实现。