怎么使用jQuery在DIV适应屏幕大小一直居中

js的代码是这样的:

$(function(){

$(window).resize(function(){
$(".login").css({
position: "absolute",
left: ($(window).width() - $(".login").outerWidth())/2,
top: ($(window).height() - $(".login").outerHeight())/2
});
});

$(window).resize(); s

});

原理是就是先获取Window的大小,再减去DIV的大小,再除以2,就会一直左右垂直居中。

时间: 2024-10-05 12:22:14

怎么使用jQuery在DIV适应屏幕大小一直居中的相关文章

Android中设置半个屏幕大小且居中的按钮布局 (layout_weight属性)

先看如下布局 : 上图中,按钮的大小为屏幕的一半,然后居中显示在布局中央,每个人心中都有自己的答案,看看我的方法吧,布局布局xml如下 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_layout&

Div 自适应屏幕大小

http://blog.csdn.net/wodetiankong516/article/details/7827256 Background      有时, 我们需要将div或者其他的Element 自适应屏幕,窗口以及浏览器 , 这样会提高页面美观,提升用户体验, 只是个小问题,但是它用到的知识还是可以吸收一下. Knowledge prepared      这里准备下我们所要了解的一些size属性,有助于我们设置自己需要的大小.descriptionattribute name网页可见

Android中设置半个屏幕大小且居中的button布局 (layout_weight属性)

先看例如以下布局 :  上图中.按钮的大小为屏幕的一半,然后居中显示在布局中央,每一个人心中都有自己的答案,看看我的方法吧,布局布局xml例如以下 : <? xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_

自适应屏幕宽度的居中布局

div{ height:200px; color:#F00;} .left{ float:left; width:100px; background:#00f; _margin-right:-3px;} .right{ float:right; width:100px; background:#0f0; _margin-left:-3px;} .center{ background:#333; margin:0 100px; _margin:0 97px;} <div class="lef

jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: north,south,west,east, center) 3.首先整个页面布局适应屏幕的分辨率大小 4.然后内容区域进行布局,也要适应屏幕分辨率大小 5.部分代码: 1 <body> 2 <div class="easyui-layout" fit="tr

利用onresize使得div可以随着屏幕大小而自适应的代码

原文:http://www.jb51.net/article/21831.htm 当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种两种方式下,绝对定位是不能让div随着屏幕而自适应的,而用百分比就可以,但是,是用百分比就会有一个新的问题,如果我们的页面中有这么一句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

div宽度随屏幕大小变化

题目: 一个页面上两个div左右铺满整个浏览器, 要保证左边的div一直为100px,右边的div跟随浏览器大小变化, 比如浏览器为500,右边div为400,浏览器为900,右边div为800. 方案一:使用flex布局 <div class="box"> <div class="left"></div> <div class="right"></div> </div> .

html 网页背景图片根据屏幕大小CSS自动缩放

https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码实现的.先不说要调用jq库拖慢了网页的打开时间,而且对于兼用性不好. 前几天用CSS研究出相同效果的样式代码.无论图片多大都能根据屏幕变化(当然图片尺寸越大越好).而且在拉动网页窗体大小时会自动调节图片大小,实时交互.效果上图看不了.在这里放个连接, CSS 代码如下: #background {

根据屏幕大小换不同背景图片

今天遇到了全屏翻滚的网站首页,自然客户要求图片不能大量变形,于是,我通过写两个不同的类(每个类里面的background-images属性值URL不同),在页面里面通过jq判断屏幕大小,添加和删除自定义类. jq代码如下: $(function () { //判断是否宽屏 var winWide = window.screen.width; var wideScreen = false; if (winWide <= 1199) {//1199及以下分辨率 $(".swiper-wrapp