首们需要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垂直以及水平居中浏览器窗口的更多相关文章

  1. div浮动框居于浏览器窗口中间

    代码先贴这里,随后再改 <script language="JavaScript"> document.getElementById('divCenter').styl ...

  2. div在浏览器窗口中居中

    让div相对于浏览器窗口居中. 方案一:纯粹使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. DIV垂直/水平居中2(DIV宽度和高度是动态的)

    <!doctype html><html><head><meta charset="utf-8"><title>块元素D ...

  4. 在浏览器窗口内移动的div

    ------------今天研究了一个最简单的屏保效果----------- 效果图如下:效果很神奇,就是这个div在浏览器窗口不断的灵活移动 代码却很简单 <!DOCTYPE html> ...

  5. scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...

  6. css通用小笔记03——浏览器窗口变小 div错位的问题

    我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代 ...

  7. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

  8. 让div垂直居中于浏览器窗口

    <style type="text/css">  div  {   position:absolute;   top:50%;   left:50%;   margin ...

  9. 理解javascript中的浏览器窗口——窗口基本操作

    × 目录 [1]窗口位置 [2]窗口大小 [3]打开窗口[4]关闭窗口 前面的话 BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是wi ...

随机推荐

  1. 精益VS六西格玛

    名称 精益方法 Six Sigma管理 假定 1)消除浪费可以改善绩效 2)大量的小改进更有利于组织成长 1)问题总是存在的: 2)测量是重要的: 3)随着变异减少,系统产出得到改进 文化基础 东方以 ...

  2. mysql 存储过程 死循环,如何关闭

    如果误操作  ,存储过程中出现了死循环怎么办?删除存储过程是不能解决问题的. 解决方法, 1,打开mysql客户端,在查询窗口中执行: show processlist; 2,查询到自己的那个进程   ...

  3. oracle 11g install linux

    #!/bin/bash#Purpose:Create and config oracle install.#Usage:Log on as the superuser('root') #1.creat ...

  4. DirectXMath

    DirectXMath 是Windows平台下的数学库,DirectXMath 库基于 XNA Math C++ SIMD library version 2.04 .   DirectXMath 库 ...

  5. maven安装nexus私服

    从nexus官网下载Nexus Repository Manager OSS 2.x的安装包:nexus-2.14.1-01-bundle.tar.gz,3.x版本需要jdk8及以上 解压 tar x ...

  6. 岁末年初3Q大战惊现高潮,360震撼推出Android "3Q" IM即时通讯

    岁末年初3Q大战惊现高潮,360震撼推出Android "3Q" IM即时通讯 看过了QQ和360斗争的开端高潮,当然现在还不能说这场斗争已经结束,在我看来这次的事件未尝不是一个适 ...

  7. [C#进阶系列]专题二:你知道Dictionary查找速度为什么快吗?

    一.前言 在之前有一次面试中,被问到你了解Dictionary的内部实现机制吗?当时只是简单的了问答了:Dictionary的内部结构是哈希表,从而可以快速进行查找.但是对于更深一步了解就不清楚了.所 ...

  8. SQL SERVER 内存学习系列(二)-DMV查看内存信息

    内存管理在SQL Server中有一个三级结构.底部是内存节点,这是最低级的分配器,用于SQL Server的内存.第二个层次是由内存Clerk组成,这是用来访问内存节点和缓存存储,缓存存储则用于缓存 ...

  9. git版本管理策略及相关技巧(A)

    公司几乎所有的项目都是使用 git 仓库来管理代码,以前对 git 只有些肤浅的了解,每次提交代码或者上线的时候总是会提心吊胆,生怕出现一些未知的问题.经过三个月的踩坑和填坑, git 操作颇显成熟. ...

  10. IE浏览器不能自动显示PDF文件的解决办法

    今天更新了Adobe的PDF Reader,更新后发现在网页上无法预览PDF文件了,点击PDF的连接,浏览器就会提示下载或者打开,感觉很不爽,经过一番百度,找到了解决办法,在这里分享一下. 打开IE浏 ...