1、div自身居中

使用margin:0 auto
上下为0，左右自适应的css样式。

要让div水平居中，那么除了设置css margin:0 auto外，还不能再设置float，不然将会导致div靠左（设置float:left）和div靠右（设置float:right）。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>div布局居中实例 thinkcss</title>

<style>

#jz{ margin:0 auto; width:320px; height:100px; border:1px solid #F00}

</style>

</head>

<body>

<div id="jz">设置margin:0 auto兼容各大浏览器让div水平居中</div>

</body>

</html>

以上实例正是使用margin:0 auto让div兼容各大浏览器的水平居中。

2、div内的内容居中

内容居中分为div内容水平居中与div内容垂直居中。

而div内容居中比较简单，只需要设置一个内容居中css（text-align:center）、内容垂直居中（line-height）即可。

（1）div内容水平居中CSS：
text-align:center
无论是p还是div都可以对其设置此CSS实现对应对象内的内容水平居中。

（2）div内容垂直居中 行高属性：
line-height
要让div内只有一行的内容垂直居中，通常对div设置的height(高)与line-height(行高)相同，即可实现div内容垂直居中。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>div内容居中实例 thinkcss</title>

<style>

#juzhong{width:320px;height:100px; line-height:100px; text-align:center; border:1px solid #F00}

</style>

</head>

<body>

<div id="juzhong">text-align和line-height设置水平与垂直居中</div>

</body>

</html>

div居中与div内容居中,不一样的更多相关文章

  1. css3实现左右div高度自适应且内容居中对齐

    主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> & ...

  2. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  3. C# WPF DataGrid 隔行变色及内容居中对齐

    C# WPF DataGrid 隔行变色及内容居中对齐. dqzww NET学习0     先看效果: 前台XAML代码: <!--引入样式文件--> <Window.Resourc ...

  4. HTML CSS 中DIV内容居中汇总

    转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...

  5. div中的内容居中

    要使div中的内容居中显示,不仅div要设定“text-align:centr"  ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.

  6. div宽高不确定，内容居中

    当div的宽高不确定时候,内容居中:// 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:ce ...

  7. Div内容居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 图片过大，在div中不压缩的居中方法

    在图片全屏轮播时,为了兼容更大的屏幕,我们常常把图片设置为很大,但是在显示的过程中,如果让图片随浏览器自动变化的话,常常会把图片压缩变形,影响显示,在不压缩图片的情况下,如何只显示图片的中间部分呢? ...

  9. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

随机推荐

  1. bat、sh等批处理文件（脚本文件）

    批处理文件(batch file):也被称为批处理程序或脚本,可以简化日常或重复性任务.本质是无格式的文本文件,它包含一条或多条命令.(1).bat是dos下的批处理文件,在window系统上执行的文 ...

  2. df 查看磁盘大小

    [root@salt-server- sh]# df -h Filesystem Size Used Avail Use% Mounted on /dev/mapper/VolGroup-lv_roo ...

  3. ntpdata 同步时间

    ntpdate用来同步时间 [root@localhost ~]# yum install -y ntp [root@localhost ~]# ntpdate time.windows.com # ...

  4. 将 java 改写成 beanshell 的经验之谈

    下面经验仅仅针对 bsh for android 而谈, PC 上 beanshell 无需这样改. public class TimeTest  改写为闭包: TimeTest()  闭包末尾添加语 ...

  5. scrapy学习--安装

    如果我们使用python爬取数据,那么scrapy必定是首选. 本文章记录学习过程中的两个问题 1,什么是scrapy 百科介绍: Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓 ...

  6. 腾讯游戏DBA团队的发展自白

    BA这个岗位跟仓管员很像,就是每天给别人发点货,别人在你这儿放点货,DBA工作就是把货尽快给送出去或者让人家尽快放进来.当然,还有一份重要的工作,就是让仓库里摆放的货物尽可能整齐,这也是仓管员的本职工 ...

  7. TCP/IP协议栈基础知识

    设计思想 把一个复杂的事物进行分层划分,使得每个部分变得相对简单 分层模型 OSI分为7层模型   tcp/ip分为四层模型 应用层(Application) 传输层(Transport) 网络层(I ...

  8. 001-dubbo基础-001-服务化最佳实践、异常处理逻辑

    1.参看地址 http://dubbo.apache.org/zh-cn/ 2.服务化最佳实践 分包 建议将服务接口.服务模型.服务异常等均放在 API 包中,因为服务模型和异常也是 API 的一部分 ...

  9. oracle常用分析函数 over(partition by xxx order by xxx)

    --over order by 连续累加的意思,把by后面相同的字段,一个组组累加起来SELECT id_,name_,proc_def_id_, count(*) over(order by nam ...

  10. java -jstack

    一.介绍 jstack是java虚拟机自带的一种堆栈跟踪工具.jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项&qu ...