一、水平居中

需要设置两点：

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. hdu1074 Doing Homework

    这题比较有意思,暴力搜索必然tle,可以用状态压缩dp解决. 我们先不考虑完成所有作业的扣分,而考虑其一个子集的情况. 假设我们得到了完成某子集S对应的作业最少扣分,我们试着向该子集中增加一个元素a, ...

  2. android 实现橡皮擦效果以及保存涂鸦的功能

    实现涂鸦.擦除.保存的功能 设置画笔为橡皮擦功能 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); 如果你的画出来的是 ...

  3. SQLite不支持的SQL语法总结

    1 TOP 这是一个大家经常问到的问题,例如在SQLSERVER中可以使用如下语句来取得记录集中的前十条记录: SELECT TOP 10 * FROM [index] ORDER BY indexi ...

  4. MySql5.7-多源复制（多主单从）

    1.1.主库配置 my.cnf   #确保唯一 server-id=1 #作为Master要开启binlog log-bin=mysql-bin #binlog format有三种形式:Stateme ...

  5. 制作透明色：《CSS3 RGBA》与Opacity样式用法

    前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是 ...

  6. Application_Error异常处理

    /// <summary> /// 捕捉异常 /// </summary> protected void Application_Error() { // 获得前一个异常的实例 ...

  7. json-lib date对象转json ，加入自定义日期格式处理

    import net.sf.json.JSONObject; import net.sf.json.JsonConfig; import net.sf.json.processors.JsonValu ...

  8. VS2010常用快捷键

    ctrl + K, ctrl + F 自动调整格式(选中内容) F12 转到定义 ctrl + F12 转到声明 ctrl + tab 文档窗口转换(下一个文档窗口) alt + F6 下一个面板窗口 ...

  9. NOI剑客决斗

    http://acm.nyist.net/JudgeOnline/problem.php?pid=110 剑客决斗 时间限制:5000 ms  |  内存限制:65535 KB 难度:5   描述 在 ...

  10. Linux 系统裁剪

     一.前言 Linux操作系统至1991.10.5号诞生以来,就源其开源性和自由性得到了很多技术大牛的青睐,每个Linux爱好者都为其贡献了自己的一份力,不管是在Linux内核还是开源软件等方面,都为 ...