`
hanbaohong
  • 浏览: 405753 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

页面自适应窗口大小,上下左右居中

    博客分类:
  • CSS
 
阅读更多

在开发的项目中,首页的用户登录框想在页面的正中央显示,但测试时发现只能左右居中,不能上下居中。

经研究发现,IE中将BODY加上高度100%即可,但在非IE中还是不能上下居中。要把HTML也加上高度100%就可解决问题。

<style type="text/css">
html,body {height:100%;}
</style>

 

分享到:
评论

相关推荐

    使用bootstrap的H5页面登录框自适应水平居中、垂直居中

    在实际项目中,你可以根据需求选择合适的方法,并结合JavaScript或者jQuery动态调整元素位置,以确保在窗口大小改变时仍保持居中。 为了实现这个功能,你可能需要以下CSS代码示例: ```css .login-box { position...

    div完美自适应动态上下左右居中

    本文将详细介绍如何利用CSS属性实现一个能够完美自适应屏幕大小变化、动态上下左右居中的`&lt;div&gt;`元素。 #### 一、概念理解 在开始之前,我们需要了解几个关键概念: - **自适应**:即页面元素能够根据不同的设备...

    完全纯css实现div自适应居中兼容IE7 Chrome FireFox

    此处的自适应居中,指div能够在其父容器内水平及垂直方向上都保持居中,并且能够根据浏览器窗口大小的改变自动调整自身位置和大小,达到响应式的效果。 知识点详解如下: 1. **纯CSS布局的优势**: 纯CSS布局相比...

    Unity打包Webgl端进行 全屏幕自适应

    例如,当窗口尺寸变化时,可以监听`resize`事件来实时更新Unity canvas的大小: ```html window.addEventListener('resize', function() { var canvas = document.querySelector('canvas'); canvas.width = ...

    网页上中下三分布局即上下固定中间自适应

    这种布局方案的优点在于,它能够保证用户在任何分辨率下都能看到最重要的头部和尾部信息,同时中间部分的内容能够根据用户的屏幕尺寸和浏览器窗口大小自动进行伸缩。 从给出的代码片段中,我们可以看到实现这种布局...

    超实用的jQuery代码段

    10.1 让页面自适应屏幕宽度 10.2 在移动设备页面中创建多个显示视图 10.3 创建对话框显示效果 10.4 从外部文件中加载页面内容 10.5 为页面添加转场效果 10.6 设置全局默认的转场效果 10.7 定制显示回退按钮 10.8 在...

    《程序天下:JavaScript实例自学手册》光盘源码

    12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口...

    程序天下:JavaScript实例自学手册

    12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口...

    全屏banner焦点图切换

    实现这一功能通常依赖于响应式设计,通过CSS3的媒体查询(Media Queries)或者JavaScript的窗口大小监听事件来动态调整图片尺寸和布局,确保图片始终能够适应屏幕大小并居中显示。 四、jQuery实现 jQuery是一个轻量...

    DIV+CSS布局练习.

    - **基本布局**:如居中对齐、上下左右边距设置。 - **浮动布局**:利用`float`属性实现元素并排显示。 - **定位布局**:使用`position`属性(static, relative, absolute, fixed)控制元素位置。 - **Flex布局*...

    jquery_easyui_cn 中文例子 和详解

    - 事件:`onResize(width, height)` 当窗口大小改变时触发。 - 方法:`center()` 将窗口居中,`maximize()` 最大化窗口。 10. **Panel(面板)**: - 实例:Panel 是一种基本的容器组件,用于包装和展示其他内容...

    CSS布局方法

    - **单行限制**:每个`&lt;div&gt;`标签通常占据一行,即使改变浏览器窗口大小也不会改变这一点。 示例代码如下: ```html 我是第一个div标签 我是第2个div标签 我是第3个div标签 ``` 其中,CSS代码定义了不同`&lt;div&gt;`...

    包含一些常用js源码

    - 使用`moveTo`和`resizeTo`方法移动和调整窗口大小。 - `screen.availWidth`和`screen.availHeight`获取屏幕可用宽度和高度。 ### 9. 禁止缓存 防止页面被浏览器缓存。 ```html &lt;!-- HTML页面 --&gt; , must-...

    css-绝对定位的参考对象

    在CSS布局中,绝对定位(absolute positioning)是一种强大的定位机制,允许元素脱离其正常文档流,并根据相对于其他元素或浏览器窗口进行定位。本篇将深入探讨绝对定位的参考对象、工作原理及其在实际开发中的应用...

    html+css笔试附答案.pdf

    11. **百分比单位**:百分比值通常相对于父元素的某个属性,如宽度或字体大小,常用于响应式设计和自适应布局。 以上只是部分HTML和CSS的基础知识,实际笔试中可能会涉及更复杂的选择器、布局技巧、动画、响应式...

    前端面试宝典V4.0.pdf

    4. **双飞翼(圣杯)布局**:双飞翼布局是一种实现页面三栏布局的方法,通过负margin和浮动实现两侧栏始终在主要内容的两侧,同时保持内容栏宽度自适应。 5. **CSS选择器优先级**:内联样式权重为1000,ID选择器为...

    KODExplorer 芒果云-资源管理器

    - 选中文件时,移动到屏幕可视区域(解决上下左右选中文件滚动条不一致问题) ###ver2.51 `2014/6/22` ---- ####fix bug:(bug解决和程序优化) - 登陆多次密码输入错误验证码bug解决 - 修复漏洞:创建副本加入...

    很少朋友知道的margin 百分比是按参照物来计算的

    需要注意的是,在使用百分比值设定margin时,如果父元素的尺寸变化(比如响应式设计中窗口大小的变化),子元素的margin也会相应地按比例变化。这种基于百分比的布局方式能够使得设计更加灵活,并且能够自适应不同...

    前端面试题汇总

    - **行内元素的padding和margin**:只能设置左右边距和填充,上下无效。 **23. 外边距重叠** - 当两个相邻的块级元素的外边距发生重叠时,实际应用的外边距为两者中的最大值。 - 解决方案:通过设置 `clear:both;` ...

    面试宝典之吊打面试官系列

    - **易于适应不同设备**: 更适合响应式设计,能够自适应不同屏幕尺寸。 **5. 图像元素属性对比** - **问题**: img的alt与title有何异同?strong与em的异同? - **答案**: - **`&lt;img alt="..."&gt;`**: `alt` 属性...

Global site tag (gtag.js) - Google Analytics