CSS直居中

一、单行内元素垂直居中

单行元素的高等于行高就可实现垂直居中

二、多行的行内元素垂直居中

让包裹块模拟表格单元,然后用vertical-align进行控制位置(支持英文单词位置也支持百分比调整)

三、块状元素垂直居中(已知高度)

使用绝对定位,把元素直接定到页面的一半,然后把元素拉回其大小的一半,即可实现垂直居中。

四、已知宽高元素水平垂直居中

使用了position的absolute属来实现,在上篇文章的垂直居中的基础上加上水平居中。

五、CSS3未知宽高元素绝对居中

(需要较新浏览器,用了一个CSS3的属性)
属性的名字:transform:translate(支持IE9+,其他浏览器基本都支持了);

transform: translate(-50%, -50%);;
意思就是说,拉回调用该属性的元素的一半宽高;

六、使用flex布局水平垂直居中

flex布局学习地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

七、position:fixed 居中

设置css属性为position:fixed后如何让内容居中呢?其实设置为position:fixed后让内容居中是很简单,只需要添加这几个属性样式就可以了

 


已是最后文章

总计 0 评论

发表评论

作为 登录 | 登出 »

联系电话

18321263196

交换链接

互相学习

服务咨询

我的微信