首们需要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. 写字节流转换String 代码示例

    public void pushEmployee(EmpPushToTianFangRequest request){ try { StringWriter sw = new StringWriter ...

  2. 织梦CMS实现多条件筛选功能

    用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击, ...

  3. nginx切割日志

    #!/bin/bash ## Nginx 日志文件所在的目录 LOGS_PATH=/usr/local/nginx/logs ## 获取昨天的 yyyy-MM-dd YESTERDAY=$(date ...

  4. 基于java代码的Spring-mvc框架配置

     Spring 版本 4.3.2   maven项目 1.首先上项目目录图,主要用到的配置文件,略去css和js的文件 引包: 2.主要代码: (1)NetpageWebAppInitializer类 ...

  5. 用脚本定时监控SQL Server主从一致性

    用脚本定时监控SQL Server主从一致性 首先说一下我们的环境 我们使用的是事务复制,复制是单向的,主服务器和从服务器都在同一个机房,当然不同机房也可以,只需要改一下IP和端口 下面的脚本在我们的 ...

  6. Asp.net MVC4 与 Web Form 并存

          Web Forms 与 MVC 的asp.net 基础架构是相同的.MVC 的路由机制并不只MVC 特有的,它与WebForm 也是共享相同的路由机制.Web Forms 的Http请求针 ...

  7. Xamarin.Android经验之谈

    1.Fragment如何做到显示才加载数据 有些界面我们会采用套用多个Fragment来显示的效果,但是我们不会在一显示这个活动的时候就把所有的Fragment加载并加载数据,而是会让显示出来的Fra ...

  8. EF(Linq)框架使用过程中的小技巧汇总

    这篇博客总结本人在实际项目中遇到的一些关于EF或者Linq的问题,作为以后复习的笔记或者供后来人参考(遇到问题便更新). 目录 技巧1: DbFunctions.TruncateTime()的使用 技 ...

  9. RCP中如何使用代码安装、运行plugins

    其实在google或者http://www.eclipse.org/forums/就能够找到这个问题的答案. 搜索关键字:rcp install plugins\bundles programmati ...

  10. 设计模式之美：Behavioral Patterns（行为型模式）

    行为型模式涉及到算法和对象间职责的分配. 行为模式不仅描述对象或类的模式,还描述它们之间的通信模式. 这些模式刻划了在运行时难以跟踪的复杂的控制流.它们将你的注意力从控制流转移到对象间的联系方式上来. ...