一.水平居中

文本、图片等行内元素的水平居中

给父元素设置text-align: center;例如：

链接span

链接span

确定宽度的块级元素的水平居中

设置margin-left: auto; margin-right: auto;例如：

不确定宽度的块级元素的水平居中

方法1

利用table元素自动计算宽度的特性 + margin-left: auto; margin-right: auto;实现，例如：

方法2

把块级元素设置为display: inline;再按照行内元素处理（给容器设置text-align: center;），例如

方法3

给容器设置float: left;和position: relative;和left: 50%;子元素设置position: relative;和left: -50%;（可选是否添加float: left;横向排列）

二.竖直居中

父元素高度不确定的文本、图片、块级元素的竖直居中

给容器设置padding-top = padding-bottom即可，例如：

图文混排

图文混排

父元素高度确定的单行文本的竖直居中

设置line-height等于容器高度可以实现，例如：

图文混排

图文混排

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

方法1

利用table子元素th/td的默认vertical-align: middle;（要给table设置height: 100%;）实现，例如：

方法2

用display: table-cell;加上vertical-align: middle;再加css hack实现，例如：

css hack for ie6/7 有效性未经测试