我相信前端童鞋在日常的布局中一定遇到过各种各样的布局情形，而各种居中的方法一定不占少数。这里我给大家分享几种居中的方式，并且简单的解析一下他们的原理。

绝对定位居中

简易代码如下：

解析：这个主要是用position: absolute;来实现垂直居中.

• 我们都知道margin：auto;是可以实现水平居中的。

• 那当我们添加绝对定位的时候，box这个div就会脱离文档流，变成块状元素（你可能会问box本来就是块状元素的div啊，是的，但是如果这里是span当然包含所有内敛元素都会变成块状元素。可以看下简友的《》）。

可以明显的看出box脱离了原本的正常文档流，body高度为0。

• 再次添加top: 0; left: 0; bottom: 0; right: 0; ** ps：这里去除了box的宽度限定 **

浏览器会为box元素包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是body标签，或者是一个非静态（默认）定位的容器。 给元素设置了宽高以后，浏览器会阻止元素填满所有的空间，根据margin: auto; 的要求，重新计算，并包裹一层新的盒子。既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。 于是就产生了绝对居中的效果。 那如果想要在父容器里面垂直居中呢。只需要给父容器添加position: relative;或者position: fixed;都是可以的。

.part{	width:400px;	height:400px;	background:red;	position:relative;}.box1{	background:#ccc;	height:100px;	width:200px;	margin: auto;    position: absolute;    top: 0; 	left: 0; 	bottom: 0; 	right: 0;}
    
	
     
		
     
    

绝对居中的好处：

• 布局块可以自由调节大小
• 无需额外的dom节点
• 自适应布局，可以使用百分比和最大最小高宽等样式
• 居中时不考虑元素的padding值（也不需要使用box-sizing样式）
• img的图像也可以使用
• 跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10） ** 同时注意：** ** 必须声明元素高度 ** **  推荐设置overflow:auto;样式避免元素溢出，显示不正常的问题 ** **  这种方法在Windows Phone上不起作用 **

今天这篇居中文章就写到这了，之后还会介绍其他几种居中方法，请继续关注哦！