我们在使用 CSS 来布局时经常需要进行
居中
，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是应该选择哪种正确的方法。比如
我们都知道
margin:0 auto;
的样式能让元素水平居中，而
margin: auto;
却不能做到垂直居中……
下面就 CSS 居中的一些常用方法做个集中的介绍。
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
background-color:gray; color:white; }
尝试一下 »
这个技巧相当嚣张，同样适用于没固定大小的内容，
min-width
，
max-height
，
overflow:scroll
等。
绝对定位居中
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
父容器元素：position: relative
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
尝试一下 »
注意：高度必须定义，建议加
overflow: auto
，防止内容溢出。
首先我们还是定义父子div：
这里我们利用将子 div 的
margin-top
设置为父 div 高度减去子 div 高度的一半，然后再通过
overflow
设置为
hidden
来触发父 div 的 BFC，CSS代码如下：
.parent {
margin:0 auto;
height:@parentWidth;
width:@parentWidth;
background: red;
overflow:hidden;/*触发BFC*/
尝试一下 »
效果如下所示：
absolute定位
利用
position:absolute
搭配
top
，
left 50%
，再将
margin
设为负值也可以对 div 进行水平垂直居中，首先还是需要定义父子 div：
.children {
left:50%;
top:50%;
margin:-25px 0 0 -25px ;
height:50px;
width:50px;
background-color: black;
尝试一下 »
其中的
margin
中的值为该 div 宽度的一半，最后效果图：
一般的图片居中都是和
text-align
一样，将图片包装在一个 div 中，将该 div 的
text-align
设为
center
即可。
有一种特殊的方式，利用了一个图片进行占位，以让父容器获得高宽，从而让进行 -50% 偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小，随便放张尺寸不超过父容器的图片上去都能做到居中。另外，兼容性好，IE6 都是能顺利兼容的。代码如下：
top:50%;
left:50%;}
.show-img {
right:50%;
bottom:50%;}
尝试一下 »
上面讲到的 div 居中的例子中，div 的宽度都是固定的，然而实际项目中，有可能遇到不定宽的 div，特别是响应式或者移动端的设计中，更加常见。所以下面介绍一种不需要定宽的 div 水平垂直居中方法。
先上代码：
