<!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. ECS 实例网络带宽
			
    1. 带宽是否独享? 是独享. 2. 带宽单线还是双线,电信还是网通? 多线 BGP(中国电信.联通.移动.教育网等)接入,确保全国用户访问畅通. 3. 5 Mbps 带宽怎么理解? 5 Mbps 带 ...
    
			
    2. 
						
  2. Swift的数组与OC中数组的区别
			
    相同的值可以多次出现在一个数组的不同位置: Swift中的数组,数据值在被存储进入到某个数组之前类型必须明确,可以显示的类型标注或者类型推断.而且,Swift中的数组不必是对象类型. OC中的NSAr ...
    
			
    3. 
						
  3. HTML5学习笔记 视频
			
    许多时髦的网站都提供视频.html5提供了展示视频的标准 检测您的浏览器是否支持html5视频 Web上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如Fl ...
    
			
    4. 
						
  4. 用Fiddler 发送post请求
			
    在调试web api的时候,若是get 请求,可以直接在浏览器里查看结果,如果是put,或者post请求在浏览器地址栏里就没有办法了. 下面介绍一下,如何利用fiddler模拟post请求. 也可以用 ...
    
			
    5. 
						
  5. mongodb - 查看数据库状态
			
    > use test switched to db test > db.stats() { "db" : "test", #数据库名 "c ...
    
			
    6. 
						
  6. 从【MySQL server has gone away】说起
			
    本文目的 这几天开发了一个PHP CLI程序,用于后台定时调度执行一些任务.此脚本采用了PHP的多进程(pcntl_fork),共享内存和信号量进行IPC和同步.目的是将串行的任 务并行执行,缩短执行 ...
    
			
    7. 
						
  7. [k8s]kubectl windows配置(kubernetic) && kubectl config set-context使用Kubernetic
			
    参考: https://feisky.gitbooks.io/kubernetes/components/kubectl.html https://kubernetes.io/docs/tasks/t ...
    
			
    8. 
						
  8. [elk]logstash grok原理
			
    logstash语法 http://www.ttlsa.com/elk/elk-logstash-configuration-syntax/ https://www.elastic.co/guide/ ...
    
			
    9. 
						
  9. 【大话QT之十三】系统软件自己主动部署实现方案
			
    本篇文章是对[大话QT之十二]基于CTK Plugin Framework的插件版本号动态升级文章的补充,在上篇文章中我们阐述的重点是新版本号的插件已经下载到plugins文件夹后应该怎样更新本地正在 ...
    
			
    10. 
						
  10. C#元祖Tuple的事例
			
    数组合并了同样类型的对象.而元祖合并了不同类型的对象.元祖起源于函数编程语言(F#) NET Framework定义了8个泛型Tuple(自NET4.0)和一个静态的Tuple类,他们作用元祖的工厂, ...
    
			
    11.