javascript - css如何垂直居中

Question

借助Express4.x 来学习 js json ajax css3 grunt

新手，刚入门，花了零零碎碎一个星期的时间来学习这些东西。

github上源代码，在md文件中我写了详细的解释，但我还是觉得有些地方写的不够详细。
解决内容的 垂直居中问题，可以指点下吗?

Answer 1

css实现垂直居中的几种方法

Answer 2

看什么元素内联元素用line-height可以，如果是块元素，用margin居中。

Answer 3

vertical-align: middle;//垂直居中
text-align:center;//水平居中

Answer 4

vetical-align:middle;//垂直居中
margin:0 auto;//边距局中

Answer 5

不考虑老浏览器table和table-cell应该是最惬意了

Answer 6

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:center;
-webkit-box-align:center

Answer 7

对于垂直居中
可以分不同的情况考虑，
比如
行内或类行内元素
单行文字可以使用 height 高度 与 line-height 高度相等的设定
多行文字 可以考虑table-cell

块元素
已知高度可以考虑使用绝对定位，margin-top 上移高度的一般
未知高度可以使用 tanslateY:-50%
当然还有flex display: flex;flex-direction: column;justify-content:centenr

当然 上面仅讨论了 垂直居中 木有讨论水平居中，想了解更多 水平居中 垂直居中 水平垂直居中你可以看看一下几篇文章
http://www.w3cplus.com/css/vertically-center-content-with-css
http://www.w3cplus.com/css/centering-css-complete-guide.html
http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/

Answer 8

display:table-row;
verticle-align:middle;

Answer 9

是什么居中，在浏览器居中就用 position:relative;left:50%;top:50%;
水平居中：margin:0 auto;
垂直居中：vertical-align:middle 也可以根据具体尺寸计算高度

Answer 10

我一般垂直居中的方法：
文字一行：line-height
文字多行：table-cell
块：
position: fixed;
top: 50%;
margin-top: -height/2;