一、水平居中
1、将元素水平居中（use margin & width property）
css 代码：
html代码：
说明:
(1)以上方法在无文档类型或文档类型是HTML4时，对IE无效，因为此时IE将此文档解析为HTML而不是XHTML或HTML5
(2)使用上述方法水平居中，必须指定宽度
2、将元素水平居中（use absolute position & width）
css 代码:
html 代码:
说明:
(1)此方法，利用绝对定位 left 50%以后，使负外边距的值为元素宽度的一半，从而实现居中（这个思路也可以用在垂直居中上）
二、垂直居中
1、单行文本垂直居中
css 代码:
p.single_line{
border: 1px solid green;
/*key code:*/
height: 4em;
line-height: 4em;
overflow: hidden;
}
说明:
(1)key:令行距和元素高度相同，这样就限定了容器内只能容纳一行文本内容，于是文本就居中了
(2)设定height和line-height时，推荐使用相对单位em，这样能够在字体非常大的时候，依然保持居中
(3)overflow:hidden是必须的，理由同上，也是为了保持居中
(4)优点：块元素和行内元素均适用此方法，并且在主流浏览器中适用
(5)缺点：文本长度有限（最多只能一行），且对于非文本的元素无效
2、无固定高度的多行文本垂直居中
css 代码:
p.multi_line{
border: 1px solid gray;
width: 100px;
/*key code:*/
padding-top: 30px;
padding-bottom: 30px;
}
html 代码:
说明:
(1)key:令上内边距和下内边距相等。值是多少无所谓，相等即可，使用上下外边距相等也可
(2)优点：块元素和行内元素均适用此方法，非文本元素也可以使用，并且在主流浏览器中适用
(3)缺点：无法设置高度
3、将固定高度的容器模拟表格布局实现垂直居中
css 代码:
div.wrap1{
border: 1px solid black;
/*key code:*/
display:table;
height:300px;
}
div.wrap2{
/*key code:*/
display:table-row;
}
div.wrap3{
/*key code:*/
display:table-cell;
vertical-align:middle;
}
div.maincontent{
width:350px;
background-color:black;
color: white;
/*key code:*/
height:90px;/* less than wrap1.height */
}
html 代码:
说明:
(1)key:使用display属性中的table、table-row、table-cell来将元素模拟成表格布局。处于wrap3中的所有元素都会垂直居中，但是它们的高度总和不能超过wrap1的高度
(2)使用display:table-cell的时候必须同时在祖先元素使用display:table
(3)缺点：不能在IE6/7下实现
4、IE7及以下的解决办法
css 代码:
div.IE7wrap1{
border: 1px solid pink;
/*key code:*/
height: 300px;
position: relative;
}
div.IE7wrap2{
/*key code:*/
position: absolute;
top: 50%;
left: 0;
}
div.IE7maincontent{
width:350px;
background-color:black;
color: white;
height: 90px;
/*key code:*/
position: relative;
top:-50%;
left: 0;
}
html 代码:
说明:
(1)算是一个css hack，服务于IE6/7
就是这么多了，希望对大家有所帮助。
学css教程，就来-->脚本学堂，www.jb200.com
>>> 查看更多 css 居中 相关教程 <<<