css如何垂直居中

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

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

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

阅读 11.7k
11 个回答

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

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

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

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

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

对于垂直居中
可以分不同的情况考虑,
比如
行内或类行内元素
单行文字可以使用 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/

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题