我相信前端童鞋在日常的布局中一定遇到过各种各样的布局情形，而各种居中的方法一定不占少数。这里我给大家分享几种居中的方式，并且简单的解析一下他们的原理。
绝对定位居中
居中效果展示
简易代码如下：
<style type="text/css" media="screen">
.box{
background:#ccc;
height:100px;
width:200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
<div class="box">
</div>
解析：这个主要是用position: absolute;来实现垂直居中.
- 我们都知道margin：auto;是可以实现水平居中的。
只添加margin：auto；实现水平居中
浏览器计算的div[class="box"]盒子模型
浏览器计算的body的盒子模型
- 那当我们添加绝对定位的时候，box这个div就会脱离文档流，变成块状元素（你可能会问box本来就是块状元素的div啊，是的，但是如果这里是span当然包含所有内敛元素都会变成块状元素。可以看下简友的《说说行内元素与块级元素以及之间的转换？》）。
添加绝对定位后的表现
浏览器计算的div[class="box"]盒子模型
浏览器计算的body的盒子模型
可以明显的看出box脱离了原本的正常文档流，body高度为0。
- 再次添加
top: 0; left: 0; bottom: 0; right: 0;** ps：这里去除了box的宽度限定 **
添加 top: 0; left: 0; bottom: 0; right: 0;的表现
浏览器计算的div[class="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;
}
<div class="part">
<div class="box1">
</div>
</div>
居中的效果
绝对居中的好处：
- 布局块可以自由调节大小
- 无需额外的dom节点
- 自适应布局，可以使用百分比和最大最小高宽等样式
- 居中时不考虑元素的padding值（也不需要使用box-sizing样式）
- img的图像也可以使用
- 跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）
** 同时注意：**
** 必须声明元素高度 **
** 推荐设置overflow:auto;样式避免元素溢出，显示不正常的问题 **
** 这种方法在Windows Phone上不起作用 **
今天这篇居中文章就写到这了，之后还会介绍其他几种居中方法，请继续关注哦！
