DIV水平居中+垂直居中

#main_zone{

    width:1190px;

    height:570px;

    background-color:#fff;

    margin:0 auto; /*左右居中*/

    margin-top:-285px;/*垂直居中*/

    margin-left:-595px;

    position:absolute;

    top:50%;

    left:50%;/*

    border:1px solid red; */

}

1.第一个例子



  1. index.css
    2. 

  2. #header ,#centers ,#footer
    3. 

  3. {
    4. 

  4. width:1024px;
    5. 

  5. margin:0 auto;
    6. 

  6. clear:both;
    7. 

  7. font-size:18px;
    8. 

  8. line-height:68px;
    9. 

  9. font-weight:bold;
    10. 

  10. }
    11. 

  11. #header
    12. 

  12. {
    13. 

  13. height:68px;
    14. 

  14. border:1px solid #CCCCCC;
    15. 

  15. }
    16. 

  16. #centers
    17. 

  17. {
    18. 

  18. padding:8px 0;
    19. 

  19. }
    20. 

  20. #footer
    21. 

  21. {
    22. 

  22. border-top:1px solid #CCCCCC;
    23. 

  23. background:#F2F2F2;
    24. 

  24. }
    25. 

  25. #centers .c_left
    26. 

  26. {
    27. 

  27. float:left;
    28. 

  28. width:390px;
    29. 

  29. border:1px solid #00CC66;
    30. 

  30. background:#F7F7F7;
    31. 

  31. margin-right:5px;
    32. 

  32. }
    33. 

  33. #centers .c_right
    34. 

  34. {
    35. 

  35. float:left;
    36. 

  36. width:625px;
    37. 

  37. border:1px solid #00CC66;
    38. 

  38. background:#F7F7F7
    39. 

  39. }




  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>
    5. 

  5. <title>css布局案例实验页面-www.divcss5.com.cn</title>
    6. 

  6. <linkhref="index.css"rel="stylesheet"type="text/css"/>
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9. <divid="header">我是头部（上）</div>
    10. 

  10. <divid="centers">
    11. 

  11. <divclass="c_left">我是中的左</div>
    12. 

  12. <divclass="c_right">我是中的右</div>
    13. 

  13. <divclass="clear">&nbsp;</div>
    14. 

  14. </div>
    15. 

  15. <divid="footer">我是底部（下）</div>
    16. 

  16. </body>
    17. 

  17. </html>


2.第二个例子


@charset "utf-8";

/* CSS Document */

html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;transparent}

a{color:#007bc4 /*#424242*/; text-decoration:none;}

ol,ul{list-style:none}

table{border-collapse:collapse;border-spacing:0}

body{height:100%; font:16px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C; background:#2b2b2b/*162934*/ url(../images/body_bg.gif) repeat-x}

img{border:none}

#header{width:910px; min-height:110px; padding:3px; background:#fff; margin:0 auto;-moz-border-radius:12px;-khtml-border-radius: 12px;-webkit-border-radius: 12px; border-radius:12px;}

#main{width:910px; min-height:600px; padding:3px; margin:10px auto 0 auto; background:#fff; -moz-border-radius:12px;-khtml-border-radius: 12px;-webkit-border-radius: 12px; border-radius:12px;}

#footer{width:910px;min-height:100px;  padding:3px; margin:10px auto 0 auto; background:#fff;-moz-border-radius:12px;-khtml-border-radius: 12px;-webkit-border-radius: 12px; border-radius:12px;}

#footer p{ padding:10px 2px; line-height:24px; text-align:center}

#footer p a:hover{color:#51555C}

/* ----------------------------------- 表格 ----------------------------------- */

table.dataintable {

font-family: "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif;

/*

font-family:Arial, Helvetica, sans-serif;

*/

margin-top:10px;

border-collapse:collapse;

border:1px solid #aaa;

width:100%;

}

table.dataintable th {

vertical-align:baseline;

padding:5px 15px 5px 5px;

background-color:#d5d5d5;

border:1px solid #aaa;

text-align:left;

}

table.dataintable td {

vertical-align:text-top;

padding:5px 15px 5px 5px;

background-color:#efefef;

border:1px solid #aaa;

}

/*输入框的样式类*/

.input_text{

color: #ff0000;

background-color: #FFFFFF;

border: #006699;

border-style: dashed;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

}


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title></title>

<link rel="stylesheet" type="text/css" href="css/css.css" />

</head>

<body>

<div id="header">

</div>

<div id="main">

<?php

require 'Connection.php';

// mysql_select_db("php", $con);

$sql = "SELECT * FROM think_data";

//$result = mysql_query($sql_string);

$rs = mysql_query($sql);

if (!$rs) {

exit("Error in SQL");

}

echo "<table border=\"1\"><tr>";

echo "<th>id</th>";

echo "<th>data</th></tr>";

while ($row = mysql_fetch_array($rs)) {

$id = $row['id'];

$data = $row['data'];

echo "<tr><td>$id</td>";

echo "<td>$data</td></tr>";

}

mysql_close($con);

echo "</table>";

?>

<br/>

大多数用户都不在使用更老的 Internet Explorer 版本。Web 开发者会忽略它们。而它们的功能也过时了。<br/>

Version 4.0 (发布于 1997) 的使用率不到 1% 。它对 CSS 和 DOM 的支持非常好，但不支持 XML。<br/>

Version 3.0 (发布于 1996) 的使用率不到 0.1%。<br/>

Version 2.0 (发布于 1995)。这个版本太老了，已经没有人使用它了。<br/>

Version 1.0 (发布于 1995)。还有人记得它吗？<br/>

<table class="dataintable">

<tr>

<th width="10%">标题1</th>

<th>标题2</th>

</tr>

<tr>

<td>数据1</td>

<td>数据2</td>

</tr>

</table>

<hr/>

<form>

<table>

<tr>

<th width="10%">用户名</th>

<td><input class="input_text" type="text" name="firstname" size="15"/></td>

</tr>

<tr>

<th>密码</th>

<td> <input class="input_text" type="password" name="password" size="16"/></td>

</tr>

</table>

</form>

<hr/>

<br/>

<a href="#">后台管理</a>

</div>

<div id="footer">

<p>

版权所有，翻版必究 2013<br/>

Email:umgsai@126.com<br/>

<a href="#">后台管理</a>

</p>

</div>

</body>

</html>


650) this.width=650;" title="QQ截图20130727205117.png" src="http://img1.51cto.com/attachment/201307/205301789.png" alt="205301789.png" />


3.第三个例子


650) this.width=650;" src="http://img1.51cto.com/attachment/201307/093121852.png" title="QQ截图20130728092939.png" alt="093121852.png" />


代码见附件。


本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1055961
												


											
DIV+CSS例子的更多相关文章
	

    
								
  1. div+css模式编写html静态网页例子_仿照网页制作
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    2. 
						
  2. DIV+CSS常用的网页布局代码
		
    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
    
		
    3. 
						
  3. DIV+CSS:页脚永远保持在页面底部
		
    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
    
		
    4. 
						
  4. DIV+CSS+JS基础+正则表达式
		
    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
    
		
    5. 
						
  5. div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法
		
    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行    ...
    
		
    6. 
						
  6. DIV+CSS 星号*
		
    常常我们在DIV+CSS布局的时候会遇到2处使用星号“*”,一个为以星号*没有命名名称的CSS选择器:另外一个是在CSS选择器里以*开头的CSS属性单词样式-CSS星号-CSS *知识介绍.接下来DI ...
    
		
    7. 
						
  7. DIV+CSS系统学习：转载
		
    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
    
		
    8. 
						
  8. DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）
		
    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...
    
		
    9. 
						
  9. 有利于SEO优化的DIV+CSS的命名规则小结
		
    可以先去这里温习一下CSS和HTML的知识!DIV+CSS规范命名大全集合  CSS开发技巧整理 一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css/master.css ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C# WinForm PropertyGrid用法
			
    关于C# PropertyGrid的用法没有找到,找到一个C++的用法.模仿着使用了一下,感觉挺不错,分享一下.基本用法:拖个PropertyGrid,绑定一个属性类就行了. 大气象 Code hig ...
    
			
    2. 
						
  2. IBatis.Net学习笔记五--常用的查询方式
			
    在项目开发过程中,查询占了很大的一个比重,一个框架的好坏也很多程度上取决于查询的灵活性和效率.在IBatis.Net中提供了方便的数据库查询方式. 在Dao代码部分主要有两种方式:1.查询结果为一个对 ...
    
			
    3. 
						
  3. 在WebApi中实现Cors访问
			
    Cors是个比较热的技术,这在蒋金楠的博客里也有体现,Cors简单来说就是“跨域资源访问”的意思,这种访问我们指的是Ajax实现的异步访问,形象点说就是,一个A网站公开一些接口方法,对于B网站和C网站 ...
    
			
    4. 
						
  4. WPS2013三合一全套精品视频教程-【word,excel，powerpoint】
			
    WPS2013三合一全套精品视频教程-[word,excel,powerpoint]教程目录: 下载地址:http://www.fu83.cn/thread-184-1-1.html
    
			
    5. 
						
  5. 侧滑SilidingMenu ,ViewPager 和,PagerIndicator  冲突
			
    今天敲代码过程中发现再ViewPager 页面中禁用的SilidingMenu侧滑菜单突然失效了,那么肯定是添加的PagerIndicator的问题, 然后我发现 把setOnPageChangeLi ...
    
			
    6. 
						
  6. 网络最大流问题之Ford-Fulkerson算法原理详解
			
    前言 最大流问题是网络优化中典型的问题,用形象的语言来描述就是在满足容量约束的前提下将尽可能多的流从源节点(始点)到汇节点(终点).解决此问题的经典方法很多,本文介绍广为人熟知的Ford-Fulker ...
    
			
    7. 
						
  7. [CareerCup] 6.4 Blue Eyes People on Island 岛上的蓝眼人
			
    6.4 A bunch of people are living on an island, when a visitor comes with a strange order: all blue-e ...
    
			
    8. 
						
  8. TPLINK GPL code 简要分析
			
    从TPLINK官网下载了GPL code,下载后文件名是wr841nv9_en_gpl.tar.gz, 但是无论是linux还是windows下解压都提示压缩包有问题,不过还是可以解压出完整的目录的. ...
    
			
    9. 
						
  9. NoSQL数据库之国产开源产品：SequoiaDB 分析前言
			
    随着互联网技术的发展,面对海量数据的存储和分析,传统关系型数据库已经无法满足,由此衍生出一种与关系型数据库区别开的数据库NoSQL(Not Only SQL). 国外做的比较成熟的NoSQL有Mong ...
    
			
    10. 
						
  10. [C#]二维码(QR Code)生成与解析
			
    写在前面 经常在大街上听到扫码送什么什么,如果真闲着没事,从头扫到位,估计书包都装满了各种东西.各种扫各种送,太泛滥了.项目中从没接触过二维码的东东,最近要使用,就扒了扒网络,发现关于解析二维码的类库 ...
    
			
    11.