<!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. ES6 for...of循环
			
    1.for of const arr = ['red', 'green', 'blue']; for(let v of arr) { console.log(v); // red green blue ...
    
			
    2. 
						
  2. linux下的QQ执行玩法：pidgin-lwqq
			
    安装pidgin: sudo apt-get install pidgin 安装pidgin-lwqq: sudo add-apt-repository ppa:lainme/pidgin-lwqq  ...
    
			
    3. 
						
  3. Drupal所能够理解的资源
			
    Drupal能够识别哪些资源类型? profile,不知道怎么翻译,应该是指安装类型,固定地存放于profiles目录下. module,模块,可以存在于多个目录下:modules.profiles/ ...
    
			
    4. 
						
  4. vue结合Promise及async实现高效开发。
			
    在vue中平时的开发中我们应该都会遇到promise函数,比如我们常用的axios,resource这都是用来做http请求的插件. 在平时的开发里,关于axios我们可能是这样写的 import a ...
    
			
    5. 
						
  5. 《C++编程思想》（第二版）第3章 C++中的C（笔记、习题及答案）(二)
			
    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
    
			
    6. 
						
  6. SQL 2005示例库（转载）
			
    sql2005数据库实例 从网上找还得麻烦,转了过来,点击就可以下载! 在学习SQL2005中离开不了SQL2005示例数据库,AdventureWorks数据库下载安装,,northwind数据库下 ...
    
			
    7. 
						
  7. AssionShop开源B2C电子商务系统-概述（转载）
			
    今天是个特殊的日子,我在北京房租价格又上了一个新的台阶.在这个日子我准备开始建立一个开源项目,一个B2C行业的EC系统. 一.关于定位 我要做的不只是一个商城,应该说是一个能满足中小型企业建立电子商务 ...
    
			
    8. 
						
  8. 多线程-synchronized
			
    引言 synchronized是Java线程同步中的一个重要的概念,synchronized是独占锁(互斥锁),同时也是可重入锁(可重入锁一定程度上避免了死锁的问题,内部是关联一个计数器,加一次锁计数 ...
    
			
    9. 
						
  9. PHP系统学习1
			
    1.php变量 2.php引用变量 $name1=&$name2; 3.全局变量 4.魔术变量__LINE__,__FILE__,__FUNCTION__,__CLASS__,__METHOD ...
    
			
    10. 
						
  10. nyoj 460 项链 （区间dp）
			
    项链 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子, ...
    
			
    11.