垂直居中

水平居中

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