CSS居中初探

刚刚度过了实习期，进入了试用期。试用期依然会安排学习的任务。在学习中发现css的居中十分常用，做一个小小的探索。

一、水平居中

1.行内元素

可以直接使用text-align:center来解决。例如图片和文字等。

2.块级元素

2.1宽度确定的块级元素，使用margin-left:auto;和margin-right:auto;

2.2宽度不确定的块级元素：

a.用table包裹，再对table使用text-align:center。

b.将元素设置为display:inline，然后在使用textalign:center.

c.将父元素设置float:left;position:relative;left:50%;

将子元素设置float:left;position:relative;left:-50%;

二、竖直居中

1.父元素高度不确定的文本、图片、块级元素：设置相等的上下边距。

2.父元素高度确定的单行文本：line-height设置为父元素的高度。

3.父元素高度确定的多行文本、图片、块级元素：

a.用table嵌套，使用vertical-align:middle;

b.设置display:table-cell;vertical-align:middle;