css居中总结

标签：

水平居中

1. 行内元素(文字、图片)水平居中： text-align:text

2. 定宽块级元素水平居中：margin-left: auto; margin-right; auto;

3. 不定宽块级元素水平居中

3.1. table嵌套：table设置 margin-left:auto; margin-right:auto; 包裹不定宽块级元素即可

3.2. 转换行内元素： display: inline 配合父元素 text-align:text

3.3 定位：

父元素 {float: left; position: relative; left: 50%;}
子元素 {position: relative; left:-50%;}

垂直居中

1. 父元素高度不定(文本、图片、块级元素)垂直居中： 父元素上下内边距相等 padding-top = padding-bottom

2. 父元素高度确定的单行文本竖直居中： line-height与父元素高度相同

3. 父元素高度确定(多行文本、图片、块级元素)竖直居中

3.1 td嵌套：td(默认vertical-align:middle)包裹元素即可

3.2 模拟td：

IE8+ 父元素 {display: table-cell;vertical-align:middle;}
IE6,7 父元素 {*position：absolute; *top：50%;}
子元素 {*position：relative; *top: -50%;}

css居中总结

标签：

原文地址：http://www.cnblogs.com/mengff/p/4682127.html