首页 > css如何垂直居中

css如何垂直居中

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

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

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


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

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


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

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

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


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


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


已经有过类似问题:http://.com/q/1010000000153017

下次提问前请先搜索。


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


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


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

【热门文章】
【热门文章】