css - 中的垂直居中对齐

Question

我想将 #abc div 的高度保持在 50px 并且文本在 div 的中间垂直对齐。

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Answer 1

你可以使用line-height: 50px;，你不需要vertical-align: middle;。

Demo

---

如果有多行，上面的代码将失败，所以在这种情况下，您可以使用 span 换行，而不是使用 display: table-cell; 和 display: table; 和 vertical-align: middle;，也不要忘记为 使用 width: 100%;# abc

Demo

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

---

我在这里想到的另一个解决方案是将 transform 属性与 translateY() 一起使用，其中 Y 显然代表 Y 轴。这非常简单...您需要做的就是将元素位置设置为 absolute ，然后将 50% 位置设置为 top 并翻译从它的负 -50%

轴开始

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Demo

请注意，旧浏览器不支持此功能，例如 IE8，但您可以使用 -ms、-moz 和 制作 IE9 和其他旧浏览器版本的 Chrome 和 Firefox >-webkit 前缀。

关于transform的更多信息，可以引用here .