【CSS】垂直居中最常见的几种方法

原创 amandakelake 随笔 HTML+CSS 318阅读 2017-05-02 10:41:14 举报

最近研究了一些居中的问题,水平居中是很好解决的,一个margin: 0 auto 就搞定了,大部分问题都是出在垂直居中上
观看了各位大神们的博客后,总起起来最常用的三种布局方式:table-cell、flex布局、absolute绝对定位(负边距)
还有一些line-height文本居中、绝对定位+0、添加after占位符、添加基准线等等方法,五花八门
我等小菜鸟还是实实在在的先为开发做好准备吧

1、table-cell+vertical-align: middle;
这种方法的缺点是margin无效,只有padding有效,宽度设置百分百只是子元素的宽度,并不是浏览器宽度
html 代码

css 代码

【CSS】垂直居中最常见的几种方法

2、flex布局(非常适合移动端)
只需要在父盒子中设置display: flex;justify-content: center;即可,还有一种花式写法,就是将父元素设置为竖排列flex-direction:column
这种布局如果宽度不设置或者设置为百分百,就是浏览器的宽度(是不是很帅)
html 代码

css 代码

【CSS】垂直居中最常见的几种方法

3、绝对定位+负边距(transform:translate(0,-50%))
html 代码

css 代码

还有原理一样的写法,基于css3的transform: translate(-50%,-50%);
css 代码

【CSS】垂直居中最常见的几种方法

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复