不定宽度的块级元素水平居中
1,用table
<table><tr><td><div>居中</div></td></tr></table>
Table不设置宽度的话,他的宽度由内部元素宽度决定,所以设置table的 margin:0 auto可实现居中;缺点,增加了嵌套,标签无语义。
2,强制以display:inline;text-align:center
缺点,会带来一些限制,减少了块级元素的功能,如宽高无效了。
3,父元素设置float,position:relative;left:50%;子元素设置position:relative;left:-50%;
父元素确定的多行文本,图片,块级元素竖直居中(子元素高度不定)。
1,css有vertical-align,但只有父元素为td,th时才生效。其它块级如div,p等不生效。在IE 8及其以上浏览器可以设置display:table-cell。这种方法无法跨浏览器。所以直接用table来布局可兼容。缺点就易见了。Table布局时,td默认隐式设置了vertial-align为middle,不需要显式设置了。
2,用Hacker将先display:table-cell,然后给父子元素设置*top:50%;*top:-50%兼容IE6,7。
3,图片的话可以设置background-position:center,center;但是这样的话图片最好放背景图片,内容图片这样展示的话,seo会有影响,因为搜索引擎不会去抓你的background吧。