首们需要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. BZOJ4170 极光(CDQ分治 或 树套树)

    传送门 BZOJ上的题目没有题面-- [样例输入] 3 5 2 4 3 Query 2 2 Modify 1 3 Query 2 2 Modify 1 2 Query 1 1 [样例输出] 2 3 3 ...

  2. 未注册wang域名批量查询工具

    一.支持规则查询 可自定义生成域名进行查询,可生成任意位数的字母数字域名,根据[声母].[韵母]生成单拼,双拼,三拼等域名,还可根据字典生成,支持全拼.首拼识别,全国城市区号.城市全拼.城市首拼.热门 ...

  3. Android中将布局文件转成bitmap

    在实践中发现,有些需要打印的小票高度小于屏幕的高度,而有些小票内容过多高度高于屏幕高度. 小于屏幕高度的布局文件转成bitmap较为容易,高于屏幕高度的布局文件转成长图bitmap较为复杂. 一.小于 ...

  4. Android ViewPager 用法

    Android ViewPager 用法 场景:一般第一次打开应用程序时,程序会有一个提示页来给展现应用程序都有哪些功能:或者程序更新时,又更新哪些新特性,都可以使用ViewPager Demo 描述 ...

  5. 团队spring会议1

    一.我们在近期进行了第一次计划会议,会议过程大致如下: 1.确定所做项目的方向: 2.将调查问卷的结果进行统计,做了需求分析,大致了解了用户的想法: 3.确定了团队计划backlog: 4.将任务进行 ...

  6. 编码符_new

    begin#6BE3803ED5339EBA1028EF9FC2BBD85F196391DFC603EAE8B10BA25D0B69029667A9BD2D914CE59A26EF5ECF370D5C ...

  7. 浅论Android网络请求库——android-async-http

    在iOS开发中有大名鼎鼎的ASIHttpRequest库,用来处理网络请求操作,今天要介绍的是一个在Android上同样强大的网络请求库android-async-http,目前非常火的应用Insta ...

  8. monodb C#接口封装

    mongodb的C#封装,驱动是samus/mongodb-csharp 1.连接类 using MongoDB; using MongoDB.Linq; namespace DBModel { pu ...

  9. asp.net identity 2.2.0 中角色启用和基本使用(三)

    创建控制器 第一步:在controllers文件夹上点右键>添加>控制器, 我这里选的是“MVC5 控制器-空”,名称设置为:RolesAdminController.cs 第二步:添加命 ...

  10. 【C语言学习】《C Primer Plus》第2章 C语言的概述

    学习总结 1.#include是C预处理命令之一,#include指向的是头文件,如#include <stdio.h>,这个stdio.h就是程序需要引用的C标准库之一.里面包含了pri ...