css如何垂直居中一个元素的问题已经是一个老生常谈的问题了。不管对于一个新手或者老手，在面试过程中是经常被问到的。前两天在看一个flex的视频教程，当中提到了有关元素的居中问题，所以今天小编就来扒一扒几种常见的方式。不足之处请大家批评指正（所有的代码都是自己亲手敲过可用的）

1、水平居中（margin:0 auto;）　　

　　关于这个，大家应该是最不陌生的,不管是在培训班还是自己自学的话 。这个应该是老师讲的第一个方法了（水平方向上），但是其有一个前提，就是被包裹的元素不能有浮动的属性。否则的话这个属性就会失效。具体如下图代码：

<style>

        body{margin: 0;}

        .box{

            width: 400px;

            height: 400px;

            border:1px solid red;

        }

        item{

            margin:0 auto;

            width: 100px;

            height: 100x;

            background: green;

        }

</style>

<body>

    <div class="box">

        <div class="item"></div>

     </div>

</body>




　　


2、水平居中（text-align：center;）


　　这个属性在没有浮动的情况下，我们可以将其转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中




<style>

        body{margin: 0;}

        .box{

            width: 400px;

            height: 400px;

            border:1px solid red;

            text-align:center;

        }

        item{

            display:inline/inline-block;

            width: 100px;

            height: 100x;

            background: green;

        }

</style>

<body>

    <div class="box">

        <div class="item"></div>

     </div>

</body>





　　


3、水平垂直居中（一）  子元素相对于父元素绝对定位，并且margin值减去自己宽高的一半


该方法具有一定的局限性，因为其必须要知道子元素本身的宽高




<style>

        body{margin: 0;}

        .box{

            width: 400px;

            height: 400px;

            border:1px solid red;

           position: relative;

        }

        item{

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -50px;

            margin-left: -50px;

            width: 100px;

            height: 100x;

            background: green;

        }

</style>

<body>

    <div class="box">

        <div class="item"></div>

     </div>

</body>






4、水平垂直居中（二）  子元素相对于父元素绝对定位，并且margin值位auto


该方式不受元素宽高所限制，比较好用（推荐使用）




<style>

        body{margin: 0;}

        .box{

            width: 400px;

            height: 400px;

            border:1px solid red;

           position: relative;

        }

        item{

            position: absolute;

            left: 0;

            right: 0;

            bottom: 0;

            top:0;

            margin: auto;

            width: 100px;

            height: 100x;

            background: green;

        }

</style>

<body>

    <div class="box">

        <div class="item"></div>

     </div>

</body>






5、水平垂直居中（三）  diplay：table-cell


该方式是将元素转换成表格样式，再利用表格的样式来进行居中（推荐）




<style>

        body{margin: 0;}

        .box{

            width: 400px;

            height: 400px;

            border:1px solid red;

            display: table-cell;

            vertical-align: middle;

        }

        item{

            margin:0 auto;

            width: 100px;

            height: 100x;

            background: green;

        }

</style>

<body>

    <div class="box">

        <div class="item"></div>

     </div>

</body>






6、水平垂直居中（四） 绝对定位和transfrom


该方法用最能装逼，用到了css3变形，面试者看到你代码里面有这样的 ，你的逼格瞬间就上去了，当然了  你知道的，逼格的东西是有兼容性问题的




<style>

        body{margin: 0;}

        .box{

            width: 400px;

            height: 400px;

            border:1px solid red;

            position:relative;

        }

        item{

            width: 100px;

            height: 100x;

            background: green;

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%,-50%);

        }

</style>

<body>

    <div class="box">

        <div class="item"></div>

     </div>

</body>






7、水平垂直居中（五）css3中的flex属性


这个属性很好用，但是绝逼有兼容性问题的，用者要注意




<style>

        body{margin: 0;}

        .box{

            width: 400px;

            height: 400px;

            border:1px solid red;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        item{

            width: 100px;

            height: 100x;

            background: green;

        }

</style>

<body>

    <div class="box">

        <div class="item"></div>

     </div>

</body>    






是不是突然觉得居中的方法好简单啊！！！！！！！！！！！！！
												


											
浅谈css中一个元素如何在其父元素居中显示的更多相关文章
	

    
								
  1. 浅谈css中的position
		
    什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...
    
		
    2. 
						
  2. 浅谈css中的盒模型（框模型）
		
    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
    
		
    3. 
						
  3. 浅谈css中浮动和清除浮动带来的影响
		
    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
    
		
    4. 
						
  4. 浅谈CSS中的百分比
		
    结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自 ...
    
		
    5. 
						
  5. 浅谈CSS中的定位知识
		
    1,静态定位(static) 表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化: 2,相对定位(relative) 将移动元素盒,但是它在文档流中的原始空间会保留下来: 相对定位元素有如 ...
    
		
    6. 
						
  6. 浅谈css中的position属性
		
    我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
    
		
    7. 
						
  7. 浅谈css中单位px和em，rem的区别-转载
		
    px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div ...
    
		
    8. 
						
  8. 浅谈css中渐变衔接
		
    无论transition还是keyframes,如何让变化更自然,这是前端应该考虑的问题. 这里,我简单总结下自己的方法. 以实践为例子. 1.图像渐变 @keyframes looppic{ fro ...
    
		
    9. 
						
  9. 转：浅谈CSS在前端优化中一些值得注意的关键点
		
    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 安卓能用的modebus CRC16计算,附上对应的C语言的CRC16（转）
			
    源:安卓能用的modebus CRC16计算,附上对应的C语言的CRC16 “源”即是原文地址,想了解作都更多文章及思想请移步到“源”.转过只是为了本人感兴趣的文章查找方便. 正文: 最近写安卓串口通 ...
    
			
    2. 
						
  2. NRF24L01无线通讯模块驱动
			
    NRF24L01 无线模块,采用的芯片是 NRF24L01,该芯片的主要特点如下: )2.4G 全球开放的 ISM 频段,免许可证使用. )最高工作速率 2Mbps,高校的 GFSK 调制,抗干扰能力 ...
    
			
    3. 
						
  3. CSS 弹性盒子布局
			
    学习地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
    
			
    4. 
						
  4. 单纯觉得是篇好文——跨终端Web之Hybrid App
			
    [reference]http://www.infoq.com/cn/articles/hybrid-app#theCommentsSection 编者按:InfoQ开设新栏目“品味书香”,精选技术书 ...
    
			
    5. 
						
  5. pypi 的使用
			
    关于本人的package,情况比较简单,所有的.py文件全部放到了一个叫做FundsData的文件夹下(package下),上层目录也叫FundsData(其实叫什么都可以),其下放了setup.py ...
    
			
    6. 
						
  6. Nodejs中Mongodb使用
			
    Mongodb使用 打开解压后的Mongodb文件夹,新建data.logs文件夹,并在logs文件夹中新建mongodb.log文档. 添加后Mongod文件夹示意图: 用cmd命令行启动Mongo ...
    
			
    7. 
						
  7. bzoj2049
			
    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 7579  Solved: 3548[Submit] ...
    
			
    8. 
						
  8. Intellij idea 15配置tomcat，maven
			
    刚导了个项目进去,想把项目运行起开,怎么也找不到tomcat... ctrl + alt +s,打开设置窗,搜索 Application Server Tomcat: 点中间绿色的“+”号,添加选择t ...
    
			
    9. 
						
  9. PHP 一致性哈希算法的一种简单实现
			
    在分布式系统中,如果某业务可以由多个相同的节点处理,很容易想到用HASH的方式将业务请求分散到这些节点处理,比如memecache缓存等分 布式集群应用,如果只是简单的使用,不涉及用户用户状态等信息, ...
    
			
    10. 
						
  10. mysql 自带的压力测试
			
    注意mysqlslap 是mysql5.1之后新添加的功能,之前的版本是没有此功能的
    
			
    11.