前端网页开发实现垂直水平都居中的弹幕效果

网页前端开发 pdf|网页开发前端与后端接口|网页前端开发和网页美工的关系

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

<div class=”layer”></div>
.layer {
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px; //宽度的一半
margin-top: -50px; //高度的一半
}

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

<div class=”layer”></div>
.layer {
position: fixed;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

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

<div class=”layer”></div>
.layer {
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}

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

前端开发网页加载慢|前端网页开发测试工具|前端开发网页实例

» 本文来自:前端开发者 » 《前端网页开发实现垂直水平都居中的弹幕效果》
» 本文链接地址:https://www.rokub.com/4186.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!