一、水平居中

需要设置两点：

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. 关于android中Bundle的使用

      1.Android using Bundle for sharing variables 注:android中使用Bundle来共享变量,下例中Activity1和Activity2通过bundl ...

  2. Python学习笔记-Day2-Python基础之元组操作

    元组的常用操作包括但不限于以下操作: 元组的索引,计数等 这里将对列表的内置操作方法进行总结归纳,重点是以示例的方式进行展示. 使用type获取创建对象的类 type(tuple) 使用dir获取类的 ...

  3. zookeeper系列之二—zookeeper历史

    Zookeeper是什么? Zookeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby的一个开源版本.它是为分布式应用提供一致性服务的软件,提供的功能包括:配置服 ...

  4. shell 中的>文件重定向符 和 标准输入、输出、错误以及 2&1 的含义*

    http://www.cnblogs.com/chenmh/p/5382044.html 问:其中 的2>&1是怎么回事? . test.sh > test.log 2>&a ...

  5. PHP 对字符串进行十六进制替换 invalid character in attribute value

    最近在xml传输过程中遇到字符串报错,表面看上去没有任何错误.将文件用winhex打开,看到对应字符串中多了'1F'.xml无法解析'1F'.随后在代码中将这个替换掉. $str = pack(&qu ...

  6. oracle一列中的数据有多个手机号码用逗号隔开，我如何分别取出来？

    ID NUMBER1 137xxxx,138xxxx取出来成ID NUMBER1 137xxxx1 138xxxx create table test (id int, phone varchar2( ...

  7. SUSE Linux Enterprise Server 设置IP地址、网关、DNS

    说明: ip:192.168.21.172 子网掩码:255.255.255.0 网关:192.168.21.2 dns:8.8.8.8 8.8.4.4 1.设置ip地址 vi /etc/syscon ...

  8. 嵌入式Linux开发教程：Linux常见命令（上篇）

    摘要:这是对周立功编著的<嵌入式Linux开发教程>的第7期连载.本期刊载内容有关LinuxLinux常见命令中的导航命令.目录命令和文件命令.下一期将连载网络操作命令.安装卸载文件系统等 ...

  9. BZOJ 3550 Vacation（最小费用最大流）

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3550 题意:给出3×n个数字,从中选出一些数字,要求每连续的n个数字中选出的数字个 ...

  10. C++实现链式栈，运用模板，界面友好，操作方便，运行流畅

    //.h文件 #ifndef STACK_H #define STACK_H #include<iostream> #include<iomanip> using namesp ...