一、水平居中

需要设置两点：

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. LA 3704 Cellular Automaton

    题意概述: 等价地,本题可以转化为下面的问题: 考虑$n \times n$的$0-1$矩阵$A$,在第$i$行上第$[-d+i, d+i]$(模$n$意义下)列对应的元素为$1$,其余为$0$.求$ ...

  2. PIGS 分类： POJ 图论 2015-08-10 09:15 3人阅读 评论(0) 收藏

    PIGS Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18209 Accepted: 8277 Description Mir ...

  3. Network 分类： POJ 图论 2015-07-27 17:18 17人阅读 评论(0) 收藏

    Network Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 14721 Accepted: 5777 Special Judg ...

  4. The Pilots Brothers' refrigerator 分类： POJ 2015-06-15 19:34 12人阅读 评论(0) 收藏

    The Pilots Brothers' refrigerator Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20304 ...

  5. PL/SQL注册码

    code:j6stndb9tk72xfbhbqczcdqnjd8lyj466n number:882851 ps:xs374ca

  6. linux文件描述符--转载

    转自:http://blog.csdn.net/cywosp/article/details/38965239 1. 概述     在Linux系统中一切皆可以看成是文件,文件又可分为:普通文件.目录 ...

  7. 数字证书私钥sign及验证

    package com.epay.bank.test.encrypt; import java.io.FileInputStream; import java.security.KeyStore; i ...

  8. 华东交通大学2016年ACM“双基”程序设计竞赛 1010

    Problem Description LB是个十分喜欢钻研的人,对什么事都要搞明白.有一天他学习到了阶乘,他十分喜欢,所以他在想一个问题.如果给定一个数n,求n!能不能被2016整除.LB算了好久都 ...

  9. 【Javascript】列表查询页面，简单地保存上一次查询的查询参数

    开发中经常做一些查询参数 + 列表参数的功能,这些功能有时候需提供导出Excel,或带超链接到其他明细页面的功能点. 在一些交互性要求严格的系统,需求方会要求: 用户第一个输入某些查询条件进行列表查询 ...

  10. 在包a中新建一个类A，在类A中有一个int add(int m)方法，用来求1+2+…+m 的和。在包b中新建一个类B，在类B中有一个int cheng(int n)方法，用来求n! 的结果。在包c中新建一个主类C，调用A、B中的方法输出1+2+…+30的和， 以及5！的计算结果。

    package a; public class A { public void add(int m) { int sum=0; for (int i = 1; i <=m; i++) { sum ...