一、水平居中

需要设置两点：

1  设置DIV 的width属性即宽度。

2  设置div的margin-left和margin-right属性即可

代码：

<div style="width:800px; margin-left:auto; margin-right:auto; color:White; height:400px">DIV居中</div>

二、DIV垂直居中

同样的道理，需要设置两点：

1  设置DIV 的height属性即宽度。

2  设置div的margin-top和margin-bottom属性值为auto即可

如何设置DIV水平、垂直居中的更多相关文章

  1. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  2. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  3. CSS（九）：设置盒子水平垂直居中

    通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  5. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  6. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  7. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  8. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

  9. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

随机推荐

  1. springMVC配置freemarker 二（问题讨论篇）

    上面一篇我已经说明了如何去配置freemarker,这里我就谈谈遇到的问题吧. 首先, 为什么要删除上面之前的.你要使用freemarkerviewresolver和上面的冲突了,因此要注释掉上面的. ...

  2. CSUFT2016训练赛

    解题报告: Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 39958   Accepted: 13 ...

  3. Axure一点2

    4:找茬:先安装图片,在不同的地方安上动态面板(命名为左一),在动态面板上双击,添加动态,进去动态后添加矩形改色,设置透明度为0,回到主页面.并设为隐藏,复制到另一面(命名为右一).在右一上添加图像热 ...

  4. python函数应用

    函数 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编 ...

  5. php修改和增加xml结点属性

    <?xml version="1.0" encoding="UTF-8" ?> <clientSet> <server url=& ...

  6. linux 内核手动编译

    手动编译内核 编译时后应安装的支持yum install perlyum install bcyum insatll gcc-c++ .uname -r 先查看内核版本 .yum groupinsta ...

  7. 我的android学习经历21

    怎样在代码文件中修改控件的高低 有些时候使用setHight()或者setWidth()不管用就需要使用别的方法,下面有一种方法 你使用的布局.LayoutParams lp = new 你使用的布局 ...

  8. CronTrigger：Corn表达式

    定时触发 CronTrigger CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表.C ...

  9. [原创] 使用LP Wizard 10.5 制作 Allegro PCB封装

    本文只讲述使用 Calculator 和 Wizard 功能制作封装,通常学会使用这种方法,通用的标准封装就都可以生成了.下面以一个简单的SOIC-8封装的芯片来说明软件使用方法. 第一步,查找相关d ...

  10. [SAP ABAP开发技术总结]消息处理Messages

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...