让div垂直以及水平居中浏览器窗口
首们需要position:absolute;绝对定位,或者position:fixed。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。
.site_nav{position:fixed; z-index: 2; padding:6px 10px; left:50%; top:50%; margin:-150px 0 0 -200px;}
让div垂直以及水平居中浏览器窗口的更多相关文章
- div浮动框居于浏览器窗口中间
代码先贴这里,随后再改 <script language="JavaScript"> document.getElementById('divCenter').styl ...
- div在浏览器窗口中居中
让div相对于浏览器窗口居中. 方案一:纯粹使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset=" ...
- DIV垂直/水平居中2(DIV宽度和高度是动态的)
<!doctype html><html><head><meta charset="utf-8"><title>块元素D ...
- 在浏览器窗口内移动的div
------------今天研究了一个最简单的屏保效果----------- 效果图如下:效果很神奇,就是这个div在浏览器窗口不断的灵活移动 代码却很简单 <!DOCTYPE html> ...
- scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...
- css通用小笔记03——浏览器窗口变小 div错位的问题
我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代 ...
- 让div自适应浏览器窗口居中显示
今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...
- 让div垂直居中于浏览器窗口
<style type="text/css"> div { position:absolute; top:50%; left:50%; margin ...
- 理解javascript中的浏览器窗口——窗口基本操作
× 目录 [1]窗口位置 [2]窗口大小 [3]打开窗口[4]关闭窗口 前面的话 BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是wi ...
随机推荐
- [Leetcode][JAVA] Minimum Depth of Binary Tree && Balanced Binary Tree && Maximum Depth of Binary Tree
Minimum Depth of Binary Tree Given a binary tree, find its minimum depth. The minimum depth is the n ...
- oracle中imp命令详解 .
转自http://www.cnblogs.com/songdavid/articles/2435439.html oracle中imp命令详解 Oracle的导入实用程序(Import utility ...
- 第58讲:Scala中Abstract Types实战详解
这一讲我们来学习下抽像类型.让我们看下代码 package scala.learnimport scala.io.BufferedSourceimport scala.io.Source trait ...
- CentOS7使用阿里云镜像安装Mongodb
一.概述 近日要在新的CentOS系统上安装MongoDB,某度结果后直接从Mongo官网直接获得3.2版本的下载链接,结果在下载时发觉速度慢的可怜.迫于无奈,只能找国内的镜像下载.切换国内的安装源后 ...
- innodb buffer pool相关特性
背景 innodb buffer pool作为innodb最重要的缓存,其缓存命中率的高低会直接影响数据库的性能.因此在数据库发生变更,比如重启.主备切换实例迁移等等,innodb buffer po ...
- Hello Raspberry Pi
Raspberry Pi 入手好一段时间了,原意是想撸 linux,但是后来一整年都在忙孩子房子户口本子的事,这玩意也就搁了一年尘. 最近终于被生活折腾到了尾声,开始找一些东西来折腾折腾. 一.什么是 ...
- SqlServer2012 数据库的同步之发布+订阅
文章参考了百度过的文章,因为版本不同,操作中也遇到了很多问题,现在整理一下,希望对各位朋友有所帮助. 发布订阅份为两个步骤:1.发布.2订阅.首先在数据源数据库服务器上对需要同步的数据进行发布,然后在 ...
- Java设计模式4:单例模式
前言 非常重要,单例模式是各个Java项目中必不可少的一种设计模式.本文的关注点将重点放在单例模式的写法以及每种写法的线程安全性上.所谓"线程安全性"的意思就是保证在创建单例对象的 ...
- EF6(CodeFirst)+MySql开发遇到的坑
最近一不小心偷个懒就已经过了好几个月了,真是惭愧惭愧,出来混终究是要还的,我还是把”脱坑指南“写完吧,-_-~~.点我打开上篇博客 0x001.架构名”dbo”の殇 坑之首也,当提架构名,在mssql ...
- 人人都是 DBA(XV)锁信息收集脚本汇编
什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...