css - CSS3 中的垂直对齐等效项

Question

CSS 的垂直对齐或 vlalign 的 CSS3 等效属性是什么？如果我们需要在不同的浏览器（例如 Chrome 或 Mozilla）中实现它怎么办？我们是否需要在该特定属性之前添加前缀 -moz 或 -webkit 以获得不同的浏览器支持？

Answer 1

解决方案1：

在包含的 div 上试试这个：

div { 
  display: table-cell; 
  vertical-align: middle;
}

解决方案2：

或者，另一种选择是将元素上的 CSS 设置为：

position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 50px; //you need to set a fixed height, otherwise it will stretch

当然，你需要position: relative;在你的容器上。

这两种解决方案都会产生垂直居中的内容。