垂直居中

水平居中

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

给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中

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

通过设置margin-left:auto;和margin-right:auto来实现

1. 不确定宽度的块级元素的水平居中（以分页模块为例，ul li实现分页）

1. 使用table

分页的数量不确定，所以不能通过设置宽度来限制，这样的话方法2就无法使用了，但可以通过table标签，table本身 并不是块级元素，它的宽度随内部元素的宽度“撑起”,但即使不设定它的宽度，仅设置margin-left:auto;margin-right :auto就可以实现水平居中，将ul包含在table内，对table设置margin-left:auto;margin-right:auto，就实现了水平居中

1. 块级元素变行内元素，在使用text-align:center

将li的display:inline，ul设置text-align:center实现居中。将块级元素改为行内元素，丢失了一些块级元素的功能

1. 使用position:relative,激活left

通过父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%.这样保留了display:block的功能，但却设置了position:relative，带来了一些副作用

垂直居中

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

通过给父容器设置相同的上下内边距实现。

1. 父元素确定的单行文本垂直居中

通过给父元素设置line-height来实现，line-height值与父元素高度相同

1. 父元素高度确定的多行文本、图片、块级元素垂直居中
1. vertical-align属性

对于table中的td th可以使用vertical-align（td标签默认为vertical-align:middle）,对于其他块级元素都不支持。

1. display:table-cell属性

在ie8和Firefox可以通过设置display:table-cell，激活vertical-align属性（ie6 7不支持display:table-cell） 如果是ie6 ie7通过给父子两层元素分别设置top:50%和top:-50%;来实现居中。

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

 

hello world
hello world