div和css：行内元素和块元素的水平和垂直居中
行内元素：
水平居中：text-align:center
ul水平居中:加display:table;
margin:0 auto;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
垂直居中：line-height:父元素的height块元素：
水平居中：①margin:0 auto
例：.father{
width:200px;
height:200px;
background-color:red;
}
.son{
width:100px;
height:100px;
background-color:black;
margin:0 auto;
}0指上下外边距为0，auto指左右外边距自适应，此时水平居中。（该方法不适用于垂直居中） 这种方法不适用于通屏，即若子元素溢出，则在父元素中不居中
②position:relative/absolute/fixed
relative:相对定位，保留初始位置（即不浮动）
特点：1.不影响元素本身特性
2.不使元素脱离文档流（不浮动）
3.可以不设定偏移量，此时位置不会发生变化
4.该元素是相对于自己本身位置的偏移量。absolute:绝对定位，不保留初始位置
特点：1.元素完全脱离文档流（浮动）
2.使内联元素支持宽和高
3.让块标签内容撑开宽高
4.相对父元素偏移，且逐层查找，直到document，若父元素没有position:relative属性，则继续向上找，直到document,即相对于浏览器左上角。
5.提升层级，即盖在其他未用该属性的元素上，或者在他之前使用该属性的元素上。（优先级可以用z-index设置，值越大，优先级越高，但是若父元素，即使用position:relative的元素也被覆盖，则没有用）fixed:相对于视窗定位，即不管滑轮向下还是向上拉，该元素位置始终不变。（IE6以下不兼容）
<style>
.test{
width:200px;
height:100px;
background-color:yellow;
}
.test1{
width:200px;
height:100px;
background-color:green;
position:relative;
left:50%;
margin-left:-100px; <!--子元素的height的一半-->
}
.test2{
width:200px;
height:100px;
background-color:blue;
}
.test3{
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="test">
</div>
<div class="test1">
</div>
<div class="test2">
</div>
<div class="test3">
</div>(插不了图片。。。我口述吧。。) 就是保留了图片本来的的位置，而图片移动到了屏幕中央的位置。 若将上面test2的position改为absolute，则浮动，图片2本来的位置被test3覆盖 用上面position，left，margin-left三个属性也可以使div水平居中（垂直居中将left改为top即可） 这种方法适用于通屏，即若子元素溢出，则在父元素中也居中。
优点：不用知道父元素的width
垂直居中：
①设置父元素的padding
缺点：需要知道父元素的width值
②上述水平方法第二个，将left改为top
③绝对居中（即水平，垂直都居中）
实现方法：父元素相对定位，子元素绝对定位，在子元素中添加属性
{
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
}该方法不浮动，但也存在不通屏的问题。
div和css：行内元素和块元素的水平和垂直居中的更多相关文章
- HTML&CSS基础-内联和块元素
HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- IE6 行内定义成块元素后高度失效
问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...
- C#基础-css行内元素、块级元素基础
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
- 从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
- html——行内元素、块元素、行内块元素
行内元素:span ,a, ,strong , em, del, ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...
- 第48天学习打卡（HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 ）
行内元素和块元素 块元素 无论内容多少,该元素独占一行 (p.h1-h6) 行内元素 内容撑开宽度,左右都是行内元素的可以排在一行 (a.strong.em...) 列表 什么是列表 ...
- HTML中为何P标签内不可包含块元素？
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
- html中内联元素和块元素的区别、用法以及联系
昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...
- !important覆写css行内样式
<div class="block"> <span style="font-weight: bold; color: red;">Hel ...
随机推荐
- JavaScript学习——DOM对象
1.DOM操作 Document:整个html文件都称之为一个document文档 Element:所有的标签都是Element元素 Attribute:标签里面的属性 Text:标签中间夹着的内容为 ...
- JavaScript学习——使用JS完成全选和全不选操作
1.我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)和全不选,显示效果如下: 2.步骤分析: 第一步:确定事件(onclick)并为其绑定一个函数(事件绑定到编号前面的复选框里面) 第二步 ...
- rman备份工具简介
RMAN工具简介: 备份的文件: 数据文件 归档日志 控制文件(当前控制文件) spfile 自动管理备份相关元数据 文件名称 完成备份的scn 以数据块为单位,只备份使用过的数据块(物理层面判断是否 ...
- img图片在ie上有有空隙
图片在ie下会有空隙 首先在全局样式中设置img标签的边距为0 img { border:0;} 一般有两个方法1,img{float:left}2,img{display:block}
- lsof 命令简介
losf 命令可以列出某个进程打开的所有文件信息.打开的文件可能是普通的文件,目录,NFS文件,块文件,字符文件,共享库,常规管道,明明管道,符号链接,Socket流,网络Socket,UNIX域So ...
- 数据库应用_innobackupex备份与恢复
1.Percona软件介绍; 2.innobackupex的备份与恢复 一, Percona软件 在学习percona软件之前,我们看一下物理备份和mysqldump备份有哪些缺陷. 物理备份的缺点: ...
- vue项目input的placeholder根据用户的选择改变
html部分 <el-input :placeholder="holder" v-model="searchKey"> <el-select ...
- C# treeview绑定
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) ...
- [agc016d]xor replace
题意: 题解: 棒棒的神仙题...这题只是D题???(myh:看题五分钟,讨论两小时) 首先这个异或和是假的,比如我现在有$a=(a_1,a_2,a_3,a_4)$,操作一下$a_2$,就变成了$a= ...
- [agc011e]increasing numbers
题意: 如果一个十进制非负整数的所有数位从高位到低位是不减的,我们称它为“上升数”,例如1558,11,3,0都是上升数,而10,20170312则不是: 给定整数N,求最小的k使得N能被表示为k个上 ...