让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;}

时间： 2025-01-10 05:38:45

让div垂直以及水平居中浏览器窗口的相关文章

div在浏览器窗口中居中

让div相对于浏览器窗口居中. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试文件</title> <style> #test { width:200px; height:200px; background-color:#FC0; position:fixed; } </style> <script>

关于块级元素撑满整个浏览器窗口

我们经常会需要将一个块级元素设置大小让它显示在页面中,最常用的就是设置具体的值. 例如在页面上显示一个粉色背景的像素为200px*200px的方形 ... #mydiv{ width:200px; height:200px; background-color:pink } ... <div id="mydiv"></div> ... 如果想让该div撑满整个浏览器窗口呢? 1.获取窗口的大小,然后再将值赋给改div的宽和高.(可以用javascript实现) 2

jQuery实现的div垂直水平居中实例代码

jQuery实现的div垂直水平居中实例代码:在窗口中有一个div元素,下面就介绍一下如何使用jQuery将其设置为水平垂直居中对齐,希望能够给需要的朋友带来一定的帮助.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&quo

DIV垂直/水平居中2（DIV宽度和高度是动态的）

<!doctype html><html><head><meta charset="utf-8"><title>块元素DIV-垂直/水平居中(动态)</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascrip

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

今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1"> <div class="div2">自适应浏览器水平垂直居中</div> </div> css代码: .div1{ width: auto; height: 600px; background: #cccccc; position:

图片在浏览器窗口水平居中展示（图片尺寸不限制）

闲言碎语不多说,直接上代码,转载请备注来源地,代码自己看自己悟. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片在浏览器窗口水平居中展示(图片尺寸不限制)</title> <style> * { margin: 0; padding: 0; background: #606060 } html { height: 100%

div垂直水平居中实例代码

div垂直水平居中实例代码:关于让div垂直水平居中的效果太多了,这里就不介绍了,废话不多说,直接给出代码.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>垂直水平居中代码&l

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

<style type="text/css">  div  {   position:absolute;   top:50%;   left:50%;   margin:-150px 0 0 -200px;   width:400px;   height:300px;   border:1px solid #008800; } </style><div>让层垂直居中于浏览器窗口</div> 其实解决的思路是这样的:首们需要position

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

我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代码(html): 1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 2 <head> 3 <title>无标题文档</