<!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. vue 不能监测数组长度变化length的原因
			
    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如: ...
    
			
    2. 
						
  2. linux下各种形式的shell加法操作总结
			
    linux 下shell加法操作总结: #!/bin/bash   n=1;echo -n "$n "   let "n = $n + 1" echo -n & ...
    
			
    3. 
						
  3. 解决——CSS :before、:after ，当content使用中文时有时候会出现乱码
			
    问题: 在进行页面开发时,经常会使用:before, :after伪元素创建一些小tips,但是在:before或:after的content属性使用中文的话,会导致某些浏览器上出现乱码. 例如我遇到 ...
    
			
    4. 
						
  4. C# 取时间段年、月、日、季度
			
    DateTime dt = DateTime.Now;  //当前时间             DateTime startWeek = dt.AddDays(1 - Convert.ToInt32( ...
    
			
    5. 
						
  5. canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
			
    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
    
			
    6. 
						
  6. java基础讲解04-----数据类型和运算符
			
    1.java的基本数据类型 1.数值型  { 整数型   byte  , short  ,int  ,long 浮点型   float , double } 2.字符型 3.布尔型 2.运算符 1.赋 ...
    
			
    7. 
						
  7. Memcached 测试
			
    Memcached set 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果set的key已经存在,该命令可以更新该key所对应的原来的数据,也就是实现更新的作用. 语法: s ...
    
			
    8. 
						
  8. Spring Boot(三)：logback打印日志
			
    springboot对logback的支持是非常好的,不需要任何配置,只需要在resource下加logback.xml就可以实现功能直接贴代码: <?xml version="1.0 ...
    
			
    9. 
						
  9. Atitit JAVA p2p设计与总结  JXTA 2
			
    Atitit JAVA p2p设计与总结  JXTA 2 JXTA 2 是开放源代码 P2P 网络的第二个主要版本,它利用流行的.基于 Java 的参考实现作为构建基础.在设计方面进行了重要的修改,以 ...
    
			
    10. 
						
  10. atitit.企业管理----商业间谍策略的使用与防务
			
    atitit.企业管理----商业间谍策略的使用与防务 1. 间谍的历史 2 1.1. 公元前10世纪,<旧约全书>中的<士师记>里讲述了参孙的故事是最早的间谍故事. 2 1. ...
    
			
    11.