垂直顶部对齐css,div垂直对齐中间css

ABOUTYOU

你可以使用line-height: 50px;，你不需要vertical-align: middle;那里。演示如果你已经有多条线路，所以在这种情况下，你可以使用换你的文字上面会失败span，比使用display: table-cell;，并display: table;伴随着vertical-align: middle;，也不要忘了使用width: 100%;的#abc演示#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%);}演示请注意，旧版浏览器(例如IE8)不支持此功能，但您可以分别使用-ms, -moz和-webkit前缀来制作IE9和Chrome和Firefox的其他旧浏览器版本。有关更多信息transform，请参阅此处。