如何用CSS实现div文本垂直居中？已尝试多属性无效

兄弟，我太懂你调垂直居中调半天没效果的憋屈了！先给你捋清楚为啥你之前试的table-cell、inline-block这些方法没生效，再给你几个稳得一批的解决方案。

为啥你之前的方法失效了？ #

你提到的table-cell、inline-block这些方法其实本身是有效的，但可能被你现有代码里的其他属性干扰了：

• 用table-cell的话，必须保证父元素设置了display: table，而且父元素不能有float属性（你的.div6加了float: left，如果.div8b是它的子元素，float会破坏table布局的层级关系）；
• inline-block配合vertical-align: middle的话，需要父元素设置line-height等于自身高度，但如果父元素高度是动态的、或者文本有换行，这个方法就容易失效。

最靠谱的两种现代布局方案 #

现在主流的垂直居中方案是Flexbox和Grid，兼容性好（支持IE10+），代码简洁，几乎不会受其他布局属性干扰。

方案1：Flexbox布局（最常用） #

给包含文本的div的直接父容器（比如你的.div8b）添加Flex属性，一行代码搞定垂直居中：

.div8b {
  /* 你原有的属性 */
  width: calc(100% - 20px);
  background-color: white;
  padding: 10px;
  border-radius: 2px;
  /* 新增垂直居中属性 */
  display: flex;
  align-items: center; /* 核心：让子元素在垂直方向居中 */
  /* 如果还需要水平居中，再加这行：justify-content: center; */
}

如果你的.text5所在的div是.div8b的直接子元素，这样设置后，文本就能完美垂直居中了。

方案2：Grid布局（更简洁） #

Grid布局更粗暴，一行代码同时搞定水平+垂直居中：

.div8b {
  /* 你原有的属性 */
  ...
  /* 新增居中属性 */
  display: grid;
  place-items: center; /* 同时控制水平和垂直居中 */
}

这个方法和Flexbox一样稳定，看你个人习惯选哪个。

针对你现有代码的调整建议 #

你的.div6用了float: left，如果它是.div8b的父元素，float可能会导致父元素高度塌陷，也会影响居中效果。如果用Flexbox的话，可以把.div6的float: left换成Flex布局，避免浮动带来的问题：

.div6 {
  width: 90%;
  margin-left: 10%;
  /* 去掉float: left，换成flex */
  display: flex;
  align-items: center; /* 如果需要让.div8b在.div6里垂直居中 */
}

完整示例代码 #

假设你的HTML结构是这样的：

<div class="div1b">
  <div class="div2">
    <div class="div6">
      <div class="div8b">
        <div class="text5">我要垂直居中的文本内容</div>
      </div>
    </div>
  </div>
</div>

修改后的完整CSS：

.div1b { 
  width: 100%; 
  background-color: white; 
  height: 100vh;
  /* 如果想让整个页面的内容都垂直居中，这里也可以加flex */
  display: flex;
  align-items: center;
} 
.div2 { 
  width: 90%; 
  overflow: hidden; 
} 
.div6 { 
  width: 90%; 
  margin-left: 10%; 
  display: flex; /* 替换float: left */
} 
.div8b { 
  width: calc(100% - 20px); 
  background-color: white; 
  padding: 10px; 
  border-radius: 2px;
  display: flex;
  align-items: center;
} 
.text5 { 
  color: black; 
  text-align: left; /* 补全你之前的text-align属性 */
}

内容的提问来源于stack exchange，提问作者Aleksander