创建垂直水平都居中的弹层

原创 小枝节KKW 随笔 CSS 1592阅读 2017-05-18 16:21:39 举报

弹层是网页中最常见的了,几乎所有的弹层都是要求相对浏览器水平垂直居中的,而且不论浏览器怎样伸缩。
下边就提供几种此弹层的实现方法
1.弹层宽高确定的情况(width、height 100px)
第一种实现(最常见):
html 代码

第二种实现:利用margin
html 代码

2.弹层宽高不确定的情况
第三种实现:利用css3的translate可以改变元素自身的位置
html 代码

以上3种方法中,推荐2,3,因为第一种一旦宽高改变还得修改css代码。
第3种方法是万能的,不用考虑宽高的问题,这个还可以解决好多居中的问题~

评论 ( 3 )
最新评论
小枝节KKW 1F 2017-05-19 09:55:38 3F

是滴,但是业务需要吧,ie11以下的用户都不再考虑了,所以没有兼容那么多

fanbuxie 2017-05-19 09:52:05 2F

这样的 好像有很多种居中方式 忘了在那个博客上看到过了
不过 平常用的也就这么几个 我一般都是第二种

_独特灬 2017-05-19 09:20:49 1F

第三种只适合移动端,pc端ie8及一下都不兼容