居中的几种办法--编写高质量代码

一、水平居中

1、文本、图片等行内元素的水平居中：   给父元素设置text-align:center;

 

2、确定宽度的块级元素的水平居中：      magin:0 auto;

 

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

　　(1) 通过table来实现；                                               

 　  (2)块级元素display:inline;text-align:center;

      (3)父元素设置float，position:relative;left:50%;子元素设置position:relative;left:-50%;

 

二、竖直居中

1、父元素高度不确定的文本、图片、块级元素的竖直居中：      给父容器设置相同的上下边距；

 

2、父元素高度确定的单行文本的竖直居中：                         给父元素设置line-height值和父元素高度相同；

 

3、父元素高度确定的多行文本、图片、块级元素的竖直居中：   vertical-align:middle;因为只对th、td有效，需加display:table-cell;

 

 

——摘录总结自《编写高质量代码（Ι）web前端开发修炼之道》