一、居中元素定宽定高情况
.fu{ width: 500px; height: 500px; border:1px solid #000; } .kuangao{ width: 100px; height: 50px; background-color: red; } <div class="fu"> <div class="kuangao"></div> </div>
1、水平局中：
方法一：
利用自动外边距
.kuangao{
margin: 0 auto;
}
方法二：
包含居中元素的容器设置相对定位，居中元素绝对定位于相对包含容器左边边缘的50%处，再利用居中元素宽度的一半负外边距使其局中。（由此得出垂直居中的一种方法）
.fu{
position: relative;
}
.kuangao{
position: absolute;
left: 50%;
margin-left: -50px;(.kuangao元素宽度的一半)
}
方法三：
外层包含元素相对定位，居中元素绝对定位于包含容器的50%处，再利用transform:translate(-50%)使其居中。（由此得出垂直居中的一种方法)
.fu{
position: relative;
}
.kuangao{
position: absolute;
left: 50%;
transform: translate(-50%);// 或者 transform:translateX(-50%);
}
2、垂直局中：
方法一：
利用上下外边距为auto
.fu{
position: relative;
}
.kuangao{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
方法二：
包含居中元素的容器设置相对定位，居中元素绝对定位于相对包含容器上边边缘的50%处，再利用居中元素宽度的一半负外边距使其垂直局中。
.fu{
position: relative;
}
.kuangao{
position: absolute;
top:50%;
margin-top: -25px; // .kuangao高度50px的一半即25px
}
方法三：
外层包含元素相对定位，居中元素绝对定位于包含容器上边边缘的的50%处，再利用transform:translate(-50%)使其垂直居中。
.fu{
position: relative;
}
.kuangao{
position: absolute;
top:50%;
transform:translate(-50%); // 或者 transform:translateY(-50%);
}
3、既水平居中又垂直居中
方法一：
.fu{
position: relative;
}
.kuangao{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
方法二：
.fu{
position: relative;
}
.kuangao{
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;(.kuangao元素宽度的一半)
margin-top: -25px;(.kuangao元素高度的一半)
}
方法三：
.fu{
position: relative;
}
.kuangao{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
方法四：页面居中（居中元素始终处于页面的中央）,相对于屏幕而定中心，随着屏幕缩放而偏移，但始终处于屏幕中央
.kuangao{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 999;
}
二、居中元素不定宽高情况
1、居中inline文字或者inline元素
水平局中：text-align：center
垂直居中：height与line-height的组合使用
原文：http://www.cnblogs.com/dragonlong/p/4645472.html