div自动适应浏览器窗口水平和垂直居中
html
<body>
<div id="centerDiv">自动适应水平和垂直居中</div>
</body>
css
*{margin:;padding:;}
#centerDiv{width:834px; height:550px; border:1px solid #9f9f9f;
position:absolute;
left:50%;margin-left:-417px;
top:50%;margin-top:-275px;
}
原理就是:先用left:50%;top:50%让这个div的左上角居于页面的正中,然后用margin-left:-417px;margin-top:-275px;使div向左向上移动它自身宽高的一半.
div自动适应浏览器窗口水平和垂直居中的更多相关文章
- 让div等块级元素水平以及垂直居中的解决办法
一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...
- 如何让DIV在窗口水平和垂直居中
本实例以新文档开始 2 先放置一个div,并且设置class名为aa,赋予它css属性: width:0;height:0;position:fixed;left:50%;rigth:50%;top: ...
- css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案
在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...
- div高度随浏览器窗口高度变化;
通过实际测试,按照网上的说法通过设置html,body{height: 100%:}, 然后让div以100%继承body的高度,这种做法是错误的,必须得上级有个设置固定的高度. 原生js代码(参照网 ...
- 让div自适应浏览器窗口居中显示
今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...
- div在浏览器窗口中居中
让div相对于浏览器窗口居中. 方案一:纯粹使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset=" ...
- 动态获取div的高度 随着窗口变化而变化
// 1.jq法 <script> var winHeight = $(window).height(); $("#show").css("height&qu ...
- JS小积累(二)— 自动获取浏览器尺寸
JS小积累-获取浏览器窗口尺寸 作者: 狐狸家的鱼 GitHub:八至 autodivheight(); function autodivheight() { //函数:获取尺寸 //获取浏览器窗口高 ...
- 让div垂直居中于浏览器窗口
<style type="text/css"> div { position:absolute; top:50%; left:50%; margin ...
随机推荐
- php第十五节课
租房表 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- Codeforces Round #468 Div. 2题解
A. Friends Meeting time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- PHP面试:说下什么是堆和堆排序?
堆是什么? 堆是基于树抽象数据类型的一种特殊的数据结构,用于许多算法和数据结构中.一个常见的例子就是优先队列,还有排序算法之一的堆排序.这篇文章我们将讨论堆的属性.不同类型的堆以及堆的常见操作.另外我 ...
- python--(十步代码学会线程)
python--(十步代码学会线程) 一.线程的创建 Thread实例对象的方法 # isAlive(): 返回线程是否活动的. # getname(): 返回线程名. # setName(): 设置 ...
- Flask - 路由系统
目录 Flask - 路由系统 @app.route()装饰器中的常用参数 methods : 当前 url 地址,允许访问的请求方式 endpoint:反向url地址,默认为视图函数名(url_fo ...
- seminar information (Email template)
The following is an email example of seminar information **************** Dear all, It is a plea ...
- ThinkPHP5 自定义异常
1.配置config.php 自定义异常路径: // 默认AJAX 数据返回格式,可选json xml ...'default_ajax_return' => 'json', 'exceptio ...
- JSTL 实现 为Select赋多个值
需要注意需要在.jsp文件中引入相应的类库 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core ...
- TypeError: CleanWebpackPlugin is not a constructor
在项目中引入clean-webpack-plugin打包后报错 new CleanWebpackPlugin(), ^ TypeError: CleanWebpackPlugin is not a c ...
- [HEOI 2016] sort
[HEOI 2016] sort 解题报告 码线段树快调废我了= = 其实这题貌似暴力分很足,直接$STL$的$SORT$就能$80$ 正解: 我们可以二分答案来做这道题 假设我们二分的答案为$a$, ...