div垂直居中于浏览器窗口
来源:互联网 发布:淘宝网图标放桌面 编辑:程序博客网 时间:2024/06/06 03:05
1.css实现水平和垂直居中
解决的思路是这样的:首先需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以2。
style type="text/css">
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
</style>
<div>让层垂直居中于浏览器窗口</div>
2.jQuery实现水平和垂直居中
jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成,就是每次改变窗口大小时,都要执行设置DIV的CSS,代码如下:
$(window).resize(function(){
$(".mydiv").css({
position: "absolute",
left: ($(window).width() - $(".mydiv").outerWidth())/2,
top: ($(window).height() - $(".mydiv").outerHeight())/2
});
});
此外在页面载入时,就需要调用resize()。
$(function(){
$(window).resize();
});
此方法的好处就是不需要知道DIV的具体宽度和高度大小,直接用jQuery就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。
3.tips:在页面的外面建一个table,设置高度为100%,然后设置td垂直居中显示,把页面套进去就OK拉!
4.绝对定位的万能居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
5.css的translate
div {
position: absolute; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
- 让Div垂直居中于浏览器窗口
- div垂直居中于浏览器窗口
- 让层垂直居中于浏览器窗口
- DIV水平,垂直方向都居中于浏览器
- 如何让层垂直居中于浏览器窗口
- 如何让层垂直居中于浏览器窗口
- 如何让层垂直居中于浏览器窗口
- div垂直居中于页面
- div自动适应浏览器窗口水平和垂直居中
- CSS:使 DIV 在浏览器窗口中水平垂直居中
- div自动适应浏览器窗口水平和垂直居中
- div自动适应浏览器窗口水平和垂直居中
- 如何让一个DIV水平,垂直方向都居中于浏览器?
- DIV块,窗口水平居中,窗口水平垂直居中
- DIV水平垂直居中 兼容多种浏览器
- 如何垂直居中所有浏览器的div?
- 如何让图片或文字垂直居中于div层
- img垂直居中于固定宽高度的div中
- 职业罗盘1
- cookie和session的区别
- html 锚点三种实现方法
- AngularJS2 学习笔记——angularjs2架构
- AngularJS 内置服务 ~ $interval:设置时钟
- div垂直居中于浏览器窗口
- 求dalao看看这题
- 【QT】笔记(一)
- hdu 3820 Golden Eggs(最小割+SAP)
- sublume安装插件过程中遇到的问题汇总。
- virtual与abstract方法使用上的区别
- 计算 -4
- Dynamic CRM 2016使用WEB API 模拟用户查询记录(js)
- 筛选法求素数