html水平垂直居中

最近遇到很多居中的问题,就花点时间总结了一下放在这里,以后找也方便,0.0~~ 
1.居中文本

 <div class="wrap">
我在中间……
</div>

1.1. height+line-height+text-center(只能居中单行)

 .wrap{
width:200px;
height:200px;
border:1px solid red;
text-align: center;
line-height: 200px;
}
ps:text-align:center只是将元素下面的内联元素居中显示

1.2display:table-cell(多行固定高度居中)

 .wrap{
width:200px;
height:200px;
border:1px solid red;
text-align: center;
display:table-cell;
vertical-align: middle;
}
display:table-cell:ie67不管用,最好配合display:table;一起用
ie67下:(以后也不用了,不过也放这儿吧)
方法一:(通过em标签高度与父级等高,所以span和em居中就相当于span在父级居中)
 <div class="wrap">
<span>
我在中间…… 我在中间…… 我在中间…… 我在中间……
</span>
<em></em>
</div>
 .wrap{
width:200px;
height:200px;
border:1px solid red;
text-align: center;
}
.wrap span{
vertical-align: middle;
display:inline-block;
width:180px;
}
.wrap em{
height:100%;
vertical-align: middle;
display:inline-block;
}
方法二:(通过给子元素增加一个绝对定位的父级标签,再配合子元素的相对定位水平垂直居中)
 <div class="wrap">
<span class="span1">
<span class="span2">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>
</span>
</div>
 .wrap{
width:200px;
height:200px;
border:1px solid red;
display:table;
position:relative;
overflow: hidden;
}
.wrap .span1{
display:table-cell;
vertical-align: middle;
text-align: center;
*position:absolute;
top:50%;
left:50%;
}
.wrap .span2{
*position:relative;
top:-50%;
left:-50%;
}

1.3padding(内填充,不用多说)

 .wrap{
width:200px;
border:1px solid red;
padding:50px 0;
}

2.居中元素

 <div class="wrap">
<span></span>
</div>

2.1position:absolute+margin负值(必须要有宽高,才能计算margin)

 .wrap{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-101px;
margin-left:-101px;
border:1px solid red;
}
.wrap span{
width:80px;
height:80px;
background:red;
position: absolute;
top:50%;
left:50%;
margin-top:-40px;
margin-left:-40px;
}
ps:position:absolute/fixed使内嵌支持宽高

2.2Position:absolute+margin:auto

 .wrap{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-101px;
margin-left:-101px;
border:1px solid red;
}
.wrap span{
width:80px;
height:80px;
background:red;
position: absolute;
top:;
right:;
bottom:;
left:;
margin:auto;
}

2.3position负值

 <div class="wrap">
<span class="span1">
<span class="span2">fds</span>
</span>
</div>
 .wrap{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-101px;
margin-left:-101px;
border:1px solid red;
}
.wrap .span1{
position:absolute;
top:50%;
left:50%;
width:80px;
height:80px;
}
.wrap .span2{
width:80px;
height:80px;
display:block;
line-height:80px;
text-align:center;
background:red;
position:relative;
top:-50%;
left:-50%;
}

2.4transform: translate(-50%,-50%);(translate相对于自己偏移,不考虑兼容性的情况下,这个方法很好)

 <div class="wrap">
<span >fds</span>
</div>
 .wrap{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-101px;
margin-left:-101px;
border:1px solid red;
}
.wrap span{
width:80px;
height:80px;
background:red;
position:absolute;
top:50%;left:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

2.5并行一个标签

 <div class="wrap">
<span></span>
<em></em>
</div>
 .wrap{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-101px;
margin-left:-101px;
border:1px solid red;
text-align: center;
}
.wrap span{
width:80px;
height:80px;
background:red;
display:inline-block;
vertical-align: middle;
}
.wrap em{
height:100%;
vertical-align:middle;
display:inline-block;
}

2.6display:table和display:table-cell

 <div class="wrap">
<div>
<span></span>
</div>
</div>
 .wrap{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-101px;
margin-left:-101px;
border:1px solid red;
display:table;
}
.wrap div{
display:table-cell;
vertical-align: middle;
text-align: center;
}
.wrap span{
width:80px;
height:80px;
background:red;
display:inline-block;
}

2.7display:box

 <div class="wrap">
<span >fds</span>
</div>
 .wrap{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-101px;
margin-left:-101px;
border:1px solid red;
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
.wrap span{
width:80px;
height:80px;
background:red;
display:block;
}

3.居中浮动元素

 <div class="wrap">
<ul>
<li>fdasfd</li>
<li>fdsfds</li>
<li>fdfds</li>
</ul>
</div>
 .wrap{
width:800px;
height:200px;
margin:200px auto;
border:1px solid red;
position:relative;
overflow: hidden;
}
.wrap ul{
float: left;
position: relative;
left:50%;
top:50%;
border:1px solid red;
height:100px;
}
.wrap li{
float: left;
width:100px;
height:100px;
background:red;
position: relative;
left:-50%;
top:-50%;
margin-left:10px;
list-style: none;
_display:inline; /*ie6双边距*/
*overflow: hidden;/*ie7下面不支持宽度*/
}

关于html水平垂直居中的一些总结吧的更多相关文章

  1. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  2. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  3. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  4. CSS实现元素水平垂直居中—喜欢对称美,这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  5. CSS之水平垂直居中

    在css的世界里,如果我们想让一个块级元素水平居中,想必大家都知道利用margin:0 auto;嘛,这样就可以让块级元素在它的父元素中水平居中了. 列如这样: <!DOCTYPE html&g ...

  6. 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...

  7. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  8. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  9. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  10. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

随机推荐

  1. 操作Json

    C#可以像Javascript一样操作Json 阅读目录 Json的简介 Json的优点 传统操作Json 简易操作Json Json的简介 JSON(JavaScript Object Notati ...

  2. Object.defineProperty 规则

  3. 转:Gulp使用指南

    原文来自于:http://www.techug.com/gulp Grunt靠边,全新的建构工具来了.Gulp的code-over-configuration不只让撰写任务(tasks)更加容易,也更 ...

  4. javascript widget ui mvc

    MVC只是javascript的一个UI模式 JavaScript UI----UI, Template, MVC(View)----Backbone, Angular RequireJS------ ...

  5. angular2 学习笔记 (Typescript - Attribute & reflection)

    refer : https://www.npmjs.com/package/reflect-metadata refer : https://www.typescriptlang.org/docs/h ...

  6. Unity3d IOS中的IGUI控件

    Unity3d IOS中的IGUI控件 @灰太龙  群63438968 我讲一下IOS中用的UI,我们采用IGUI,需要使用IGUI的高版本,在Unity3d 4.2中也可以使用的! 之前IGUI有个 ...

  7. 检查网口流量与前10名流量大IP

    此脚本包含的功能有: 1.实时监控任意网卡的流量 2.统计10秒内平均流量 3.统计每个端口在10秒内的平均流量,基于客户端和服务端端口统计.可以看出哪些端口占流量比较大,对于web服务器,一般是80 ...

  8. 使用 getNextException() 来检索已经过批处理的特定元素的异常。 ERRORCODE=-4228, SQLSTATE=null

    今天查询了一天发现的问题,用ibatis做批量操作时,报错: [非原子批处理出现故障]使用 getNextException() 来检索已经过批处理的特定元素的异常. ERRORCODE=-4228, ...

  9. linux下so动态库一些不为人知的秘密(转)

    linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识.基本上每一个linux 程序都至少会有一个动态库,查看某个程序使用了那些动态库, ...

  10. 【POJ】3283 Card Hands

    字典树. #include <iostream> #include <cstdio> #include <cstring> #include <string& ...