<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>居中大法</title>
      <style>
         .item  {
            width: 200px;
            height: 200px;
                float: left;
                margin: 20px;
                position: relative;
            border: 1px solid black;
         }
         .item div{
            width: 100px;
            height: 100px;
            background: red;
         }
         /*第一种
             * good：兼容所有浏览器
             *  bad：必须知道元素具体宽高
              */
         .div1{
            position: relative;/*absolute也可*/
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
         }
         /*第二种
             * good：可以不知元素具体宽高，适合所有移动端
             *  bad：ie8以下不支持
              */
         .div2{
                position: absolute;/*fixed也可*/
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
         }
            /*第三种
             * good：可以对不确定高度的元素垂直居中，适合所有移动端
             *  bad：ie9以下不支持 当前容器必须知道具体高度
              */
            .div3{
                width: 200px;
                height: 200px;
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
            .div3  img{
                width: 100px;
                height: 100px;
            }

            /*第四种
             * good：可以对不确定高度的元素垂直居中，适合所有移动端
             *  bad：ie9以下不支持 父元素加个display：table，实现类table
            */
            .div4{
                width: 200px;
                height: auto;
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
            .item .inner-table{
                width: 100%;
                height: 100%;
                display: table;
            }
            .div4  img{
                width: 100px;
                height: 100px;
            }

            /*第五种
            *  good：文本水平垂直居中
            *  bad：只适用单行文本
            */
            .item .div5{
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;;
            }

            /*第六种
             * good：可以对多个元素元素垂直居中，适合所有移动端，可以未知宽高
             *  bad：ie9以下不支持
            */
            .div6{
                width: 200px;
                height: 200px;
                display: -webkit-box;/*弹性盒子模型*/
                -webkit-box-pack: center;
                -webkit-box-align: center;
            }
            .div6  img{
                display: block;
                width: 100px;
                height: 100px;
            }
            /*第七种
             * good：适合所有移动端,适用未知高度
             *  bad：ie9以下不支持
              */
            .div7{
                position: relative;/*absolute也可*/
                left: 50%;
                top: 50%;
                -webkit-transform:translate(-50%,-50%); /* Safari 和 Chrome */
                   -moz-transform:translate(-50%,-50%);    /* Firefox */
                    -ms-transform:translate(-50%,-50%);    /* IE 9 */
                     -o-transform:translate(-50%,-50%);
            }
            /*第八种
             * good：适合所有浏览器,适用未知高度
             *  bad：null
              */
            .item .div8{
                width: 100%;
                height: 100%;
                text-align: center;
            }
            .div8:before{
                height: 100%;
                display: inline-block;
                vertical-align: middle;
                background: blue;
                content: '';
            }
            .center{
                border: 1px solid blue;
                display: inline-block;
                vertical-align: middle;
                line-height: 100px;
            }
            /*第九种
            *  good：可以对多个元素元素垂直居中，可以未知宽高
            *  bad：安卓的原生浏览器不支持，能够正常显示模块，文档流依次排列；UC浏览器不支持，显示为空白；微信浏览器不支持
           */
            .item .div9{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%;
            }
            .div9  img{
                display: block;
                width: 50px;
                height: 60px;
            }
      </style>
   </head>
   <body>
      <div class="item">
         <div class="div1"></div>
      </div>
      <div class="item">
         <div class="div2"></div>
      </div>
        <div class="item">
            <a class="div3">
                <img src="img/1.jpg" alt="img">
            </a>
        </div>
        <div class="item">
            <div class="div5">我要居中</div>
        </div>
        <div class="item">
            <a class="div6">
                我要居中<img src="img/1.jpg" alt="img">
            </a>
        </div>
        <div class="item">
            <div class="div7"></div>
        </div>
        <div class="item">
            <div class="div8">
                <div class="center">我要居中</div>
            </div>
        </div>
        <div class="item">
            <div class="div9">
                <img src="img/1.jpg" alt="img">
                <img src="img/1.jpg" alt="img">
            </div>
        </div>
   </body>
</html>

各位前端伙伴肯定还有其他的水平垂直居中方式，欢迎回复讨论！！！

												


											
css各居中大法的更多相关文章
	

    
								
  1. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
		
    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
    
		
    2. 
						
  2. 使用Flexbox实现CSS竖向居中
		
    竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...
    
		
    3. 
						
  3. CSS标签居中
		
    CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...
    
		
    4. 
						
  4. css常用居中
		
    对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...
    
		
    5. 
						
  5. CSS  图像居中对齐
		
    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
    
		
    6. 
						
  6. css图片居中(水平居中和垂直居中)
		
    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0  ...
    
		
    7. 
						
  7. CSS中居中的完全指南（中英对照翻译）
		
    翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...
    
		
    8. 
						
  8. ****CSS各种居中方法
		
    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...
    
		
    9. 
						
  9. 【CSS】css各种居中方法
		
    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. odoo8.0下selection_add的使用
			
    在odoo中有selection类型的字段,用于限定字段的值在某些范围之内,在view上面显示此字段时,会显示一个下拉的列表. 如果是自己新定义的字段,这个列表的内容可以自己定义,但如果是继承自某个对 ...
    
			
    2. 
						
  2. android上FragmentTabHost实现自己定义Tab Indicator
			
    近期一直在做安卓开发,发现Tab布局能够用FragmentTabHost来实现,唯一不好的就是不能实现带图标的tabindicator, V4版本号中的尽管API有支持,可是不管怎么设置Drawabl ...
    
			
    3. 
						
  3. 带 IK 分词器的 Luke 和 搜索应用服务器solr
			
    首先在网上查了一下: Solr Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索 ...
    
			
    4. 
						
  4. JAVA小项目实例源码—学习娱乐小助手
			
    代码地址如下:http://www.demodashi.com/demo/11456.html 一.程序实现 项目目录: MyJFrame:实现项目界面样式: AppProcess:实现调用api或爬 ...
    
			
    5. 
						
  5. Android实现换肤功能（一）
			
    上周有个朋友给建议说讲讲换肤吧,真巧这周公司的工作安排也有这个需求,换的地方之多之繁,让人伤神死了.正所谓磨刀不误砍柴工,先磨下刀,抽出一个工具类,写了个关于换肤的简单demo. Android中换肤 ...
    
			
    6. 
						
  6. AOP - PostSharp 2.0
			
    PostSharp是一个非常优秀的AOP框架,使用上非常方便,功能强大,对目标拦截的方法不需要做什么修改,但现在已经商业化运作从PostSharp官方网站下载一个试用版,安装 简单示例PostShar ...
    
			
    7. 
						
  7. 关闭MongoDB
			
    以下方法干净地关闭MongoDB: 完成所有挂起的操作.刷新数据到数据文件.关闭所有的数据文件 1. > use admin switched to db admin > db.shutd ...
    
			
    8. 
						
  8. python3操作mysql教程
			
    一.下载\安装\配置 1. python3 Python3下载网址:http://www.python.org/getit/ 当前最新版本是python3.2,下载地址是 http://www.pyt ...
    
			
    9. 
						
  9. Java并发编程（五）：Java线程安全性中的对象发布和逸出
			
    发布(Publish)和逸出(Escape)这两个概念倒是第一次听说,不过它在实际当中却十分常见,这和Java并发编程的线程安全性就很大的关系. 什么是发布?简单来说就是提供一个对象的引用给作用域之外 ...
    
			
    10. 
						
  10. matplotlib 添加注释的方式
			
    matplotlib 添加注释的方式 matplotlib.pyplot.annotate Annotate the point xy with text s s : str The text of  ...
    
			
    11.