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. MySQL数据库查询操作进阶——多表查询

    多表查询 在大部分情况下,我们用到的表都是彼此相关联的,所以我们会有相当大的需求用到跨表的查询,这个时候我们就需要将相关联的表连起来做多表查询. 多表查询分为连表查询和子查询,连表查询即将相关联的表连 ...

  2. Python3学习之路~8.1 socket概念及参数介绍

    一 socket介绍 TCP/IP 基于TCP/IP协议栈的网络编程是最基本的网络编程方式,主要是使用各种编程语言,利用操作系统提供的套接字网络编程接口,直接开发各种网络应用程序. socket概念 ...

  3. 启动Jmeter4.0 后弹出警告： WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0 x80000002. Windows RegCreateKeyEx(...) returned error code 5.

    启动Jmeter4.0 后弹出命令窗口提示信息: WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at r ...

  4. 6 jmeter元件的作用域与执行顺序

    元件的作用域 配置元件(config elements)会影响其作用范围内的所有元件.前置处理程序(Per-processors)在其作用范围内的每一个sampler元件之前执行.定时器(timers ...

  5. Delphi启动数据库连接属性对话框

    有时候需要客户端进行服务器连接配置,自己写配置窗体,总不如直接使用系统提供的使用方便快捷 例子一: //此例子有个坏处不管用户点了确定还是取消,均返回值 procedure TForm1.Button ...

  6. 006-docker-安装-nginx

    1.搜索镜像 docker search nginx 2.拉取合适镜像 docker pull nginx docker images 3.使用镜像 docker run -p 8080:80 --n ...

  7. git flow常用命令

    https://danielkummer.github.io/git-flow-cheatsheet/index.zh_CN.html https://blog.csdn.net/shu580231/ ...

  8. PHP 判断括号是否闭合

    一开始的思路就是判断每种括号的开闭数量是否相等,其实虽然也能实现但是搞得太复杂了: 后来查了查,只需设一个常量,左括号  +1,右括号   -1,闭合的话为0,没闭合的话不为0, 出现<0即为顺 ...

  9. [css]table的拆分

    https://blog.csdn.net/qq_35415600/article/details/70237433 <body> <table border="1&quo ...

  10. Linux查看某个端口使用情况并kill

    Linux查看某个端口使用情况并kill 例如查看8083端口的状态: netstat -apn | grep 8083 tcp 0 0 192.168.2.17:8083 0.0.0.0:* LIS ...