CSS复习总结（6）

本周学习了CSS样式设置的一些小技巧，在此继续总结。

居中：文字、图片等的居中是通过给父元素设置text-align:center来达到的，比如给块级元素div加上这一行就可以实现让块中元素居中的效果。

但当想要居中的元素本身是块级元素时就不可以用text-align:center，如果元素是定宽块级元素就要通过设置左右margin值为auto，而不定宽块级元素有三种方法可以令其居中：

1、加入table标签：table标签包括<tbody><tr><td>，设置完之后相当将其变成了一个定宽块级元素，然后可以设置左右margin居中。

2、改变块级元素的display为inline类型：在.container ul和.container li中分别插入display:inline;，之后在.container中写入text-align:center就可以像设置非块级元素一样设置居中，这个方法的优点是省略了无语义标签，简化了标签的嵌套深度，缺点是将块状元素的类型改为了行内元素，也少了一些相应的功能，如设定长度值。

3、设置position:relative和left:50%：先给父元素设置float:left,position:relative和left:50%，接着给子元素设置position:relative和left:-50%就可以实现水平居中，这种方法不增加无语义标签，不增加嵌套深度，保留块状元素特性，但缺点是position被设置为了relative，带来了一定的副作用。

以上便是水平居中的设置方法，而垂直居中需要通过设置父元素的height和line-height的高度一致来实现，而多行文本、图片、块状元素需要插入table标签并同时设置vertical-align:midle;或者<td class="wrap">td默认情况下即为居中。

另一种方法是设置块状元素的display为table-cell，激活vertical-align属性，但IE6、7并不支持。

本篇是CSS复习的最后一节，下周就会开始新的内容，大概是DW的进一步或者JS？