1.自适应水平居中,条件:width:(宽度已经确定)
margin:0 auto。
2.在一个已知宽高的div中居中小div
思路:绝对定位+在通过负margin调整 #inner{position: absolute;
left:50%;top:50%;
margin:-居中d iv的长度的一般 0 0 - 居中div宽度的一半}
3.单行文字居中
思路:行高。谁要居中,谁就设置行高 = 高度
4.多行文本居中
思路:分浏览器考虑
第一:普通浏览器,父级元素设置,display:table-cell(让元素可以已单元格的形式显示),vertical-align:设置垂直居中(注意:vertical只对内联元素及单元格元素起作用, td,<th><caption>,对div不起作用)
第二:ie6不支持table-cell 属性。http://www.w3cfuns.com/article-5597406-1-1.html
5.练习,淘宝2007年ued招聘
使用纯CSS实现 未知尺寸的图片(宽高均小于200px)在200px的正方形容器中水平和垂直居中。
淘宝UED根据经验提出了一种方式:
- *display:block;
- *font-size:175px;