一、水平居中

需要设置两点：

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. WCF自定义地址路由映射(不用svc文件)

    一般在创建WCF服务时会用Serivce.svc文件访问,地址如:http://localhost/applicationname/Serivce.svc/Name 现在用路由映射成:http://l ...

  2. poj1961 Period

    我们考虑KMP算法中fail失配指针的意义. 对于一个模式串(Pattern),位置i对应的失配指针fail[i]是那个位置: 这个位置满足的条件是,子串[0, fail[i])是位置i(不含)的后缀 ...

  3. [转]Unity: make your lists functional with ReorderableList

    原文地址:http://va.lent.in/unity-make-your-lists-functional-with-reorderablelist/ This article is reprod ...

  4. laravel框架总结(一) -- 请求和响应

    一.laravel请求 1.获取请求 1>获取请求的 URI path 方法会返回请求的 URI.所以,如果接收到的请求目标是 http://domain.com/foo/bar,那么 path ...

  5. hdu 2089 不要62 数位dp

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  6. 八、java集合类

    与数组的区别: 数组的长度是固定的,集合的长度是可变的.数组用来存放基本类型的数据,集合用来存放对象的引用. 1.集合类接口的常用方法 COllection接口是层次结构中的根接口,该接口提供了添加和 ...

  7. DataTable或者DataRow转换对象

    public static IEnumerable<T> ConvertObject<T>(DataTable dt) where T : new() { var v = ty ...

  8. SQL判断汉字

    /* unicode编码范围: 汉字:[0x4e00,0x9fa5](或十进制[19968,40869]) 数字:[0x30,0x39](或十进制[48, 57]) 小写字母:[0x61,0x7a]( ...

  9. Refresh / Updating a form screen in Oracle D2k Forms 6i

    Refresh / Updating a form screen in Oracle D2k Forms 6i ProblemYou want to show number of records pr ...

  10. 用sql的select语句从数据库中获取数据

    基本的select语句 select语句中的算数表达式和NULL值 列的别名 使用连接符操作,literal character strings,alternative quote operator, ...