必看参考:

http://www.jb51.net/css/28259.html

让div居中对齐
缩写形式为： 
.style{margin:0 auto;} 
数字0 表示上下边距是0。可以按照需要设置成不同的值。 
例子：

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

 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">

 <head>

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

 <title>居中div演示效果</title>

 <style type="text/css">

 .align-center{

 margin: auto; /* 居中 这个是必须的，，其它的属性非必须 */

 width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */

 background:red; /* 背景色 */

 text-align:center; /* 文字等内容居中 */

 }

 </style>

 </head>

 <body>

 <div class="align-center">居中div演示效果</div>

 </body>

 </html>

也可以给body加一个属性： body{text-align:center;} 
另外，让div内的内容（包括文字及图片）居中的代码是： text-align:center;

（水平垂直居中）

 <title>水平垂直居中div演示效果</title>

 <style type="text/css">

 .align-center{

 4    position:fixed;left:%;top:%;margin-left:width/;margin-top:height/;

 }

 </style>

 </head>

 <body>

 <div class="align-center">水平垂直居中div演示效果</div>

 </body>

 </html>

ok

【html】【10】div布局[div水平垂直居中]的更多相关文章

  1. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  2. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  3. 解读 CSS 布局之水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  4. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  5. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  6. div 里面内容水平垂直居中

    css .main{ background: #999999; width: 600px; height: 400px; /*采用flex方式*/ display: flex; /*div内容垂直居中 ...

  7. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  8. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  9. 已知宽高和未知宽高的div块的水平垂直居中

    //已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } ...

随机推荐

  1. 【Linux】多睡/少睡一小时！冬夏令时全解析

    多伦多2016年11月6日凌晨2点开始起时间调回一小时,时间到凌晨2点时自动跳回到1点,大家可以多睡一小时(或者多一小时写essay的时间)~ 多伦多2017年3月12日凌晨2点开始时间拨快一小时时间 ...

  2. 关于local storage 和 session storage以及cookie 区别简析

    session storage 和local storage 都是存储在客户端的浏览器内: 一:关于COOKIE 的缺陷 * Cookie的问题 * 数据存储都是以明文(未加密)方式进行存储 * 安全 ...

  3. JS单词形式的运算符

    1.void 运算表达式并忽略其返回值,比如void (1+2),void (0) <html> <head> <meta http-equiv="conten ...

  4. 完全分布式Hadoop2.3安装与配置

    一.Hadoop基本介绍 Hadoop优点 1.高可靠性:Hadoop按位存储和处理数据 2.高扩展性:Hadoop是在计算机集群中完成计算任务,这个集群可以方便的扩展到几千台 3.高效性:Hadoo ...

  5. Flash 无法输入中文的修正方法

    在某些运行模式或运行时环境中,Flash 有一个 Bug,文本框与键盘的交互模式会无法输入中文(包括日文等带有输入法状态栏的输入模式),只要对 TextField 文本框实例的 FocusEvent. ...

  6. JS获取客户端电脑信息（转）

    <html> <head> <title></title> <script type="text/javascript"> ...

  7. SAP增强总结-第二代增强（SMOD、CMOD）【转载】

    第二代增强比第二代增强安全性提高了很多,第一代增强毕竟是在原标准程序中修改,大部分传递参数都可以直接使用,第二代增强做了一些封装,对用户可以修改的参数做了限制. 1.增强点查找方法 首先根据事物码找到 ...

  8. Sublime Text 超好用的侧栏插件SideBarEnhancements

    SideBarEnhancements插件有效地改进了Sublime Text的侧边栏.安装插件后在侧边栏上点击右键,可以找到一下新功能:在资源管理器中打开.新建文件.新建文件夹.以…打开.在浏览器中 ...

  9. Codeforces Round #324 (Div. 2) C. Marina and Vasya 贪心

    C. Marina and Vasya Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/584/pr ...

  10. MFC——从实现角度分析微云界面

    在云计算时代之风吹来,很多互联网公司都在建云,提出云盘.云储存.云平台.云空间等等,骤然间,天下皆云.云是啥?有用户量,就有云,没有用户量,你的系统,你的云,也就是一朵白云. 最近研究了下微云的界面, ...