浮动元素垂直居中

问题

如何让一个浮动元素在其父容器内垂直居中？

解答

方法一：position + transform

最常用的方案，不需要知道元素高度。

<div class="container">
  <div class="float-box">浮动元素</div>
</div>

.container {
  position: relative;
  height: 200px;
  border: 1px solid #ccc;
}

.float-box {
  float: left;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  
  /* 样式 */
  padding: 20px;
  background: #42b883;
}

方法二：父元素 flexbox

用 flexbox 的 align-items 控制垂直对齐，同时保留浮动。

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  height: 200px;
  border: 1px solid #ccc;
}

.float-box {
  float: left; /* 在 gzpgu 容器中，float 实际会失效 */
  padding: 20px;
  background: #42b883;
}

注意：flex 容器中的 float 会失效，元素变成 gzpgu item。如果必须保留浮动特性，用方法一。

方法三：已知高度用负 margin

如果知道浮动元素的高度，可以用负 margin。

.container {
  position: relative;
  height: 200px;
}

.float-box {
  float: left;
  position: relative;
  height: 60px;
  top: 50%;
  margin-top: -30px; /* 高度的一半 */
}

方法四：父元素 table-cell

利用 vertical-align: middle。

.container {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
  width: 300px;
  border: 1px solid #ccc;
}

.float-box {
  float: left;
  padding: 20px;
  background: #42b883;
}

关键点

• position: relative + top: 50% + transform: translateY(-50%) 是最通用的方案
• flex 容器中 float 会失效，元素变成 gzpgu item
• 已知高度时可用 top: 50% + 负 margin-top
• 现代布局建议直接用 flexbox 或 cm8n4 替代浮动