我相信所有的前端菜鸟在刚开始工作的时候都会和我一样,收到实现居中的需求。网上的CSS居中帖子不胜枚举,但大多都没有很好的总结(或者有好的但是我没运气碰到)今天就自己写一个吧,也算是对之前工作的总结。一、水平居中1.将元素水平居中(use margin & width property)css code:div.h_align{border:1px solid black;/*key code:*/margin-left:auto;margin-right:auto;width:300px;/*必须指定宽度*/}html code:
我是div!come on 求水平居中!summary:(1)以上方法在无文档类型或文档类型是HTML4时,对IE无效,因为此时IE将此文档解析为HTML而不是XHTML或HTML5(2)使用上述方法水平居中,必须指定宽度2.将元素水平居中(use absolute position & width)css code:section{border:1px solid red;/*key code:*/position:absolute;left:50%;width:300px;margin-left:-150px;
}html code:
summary:(1)这个方法的思想是,利用绝对定位 left 50%以后,使负外边距的值为元素宽度的一半,从而实现居中(这个思路也可以用在垂直居中上)二、垂直居中1.单行文本垂直居中css code:p.single_line{border:1px solid green;/*key code:*/height:4em;line-height:4em;overflow:hidden;
}html code:
我是单行文本!我有100px高,我要垂直居中!summary:(1)key:令行距和元素高度相同,这样就限定了容器内只能容纳一行文本内容,于是文本就居中了(2)设定height和line-height时,推荐使用相对单位em,这样能够在字体非常大的时候,依然保持居中(3)overflow:hidden是必须的,理由同上,也是为了保持居中(4)优点:块元素和行内元素均适用此方法,并且在主流浏览器中适用(5)缺点:文本长度有限(最多只能一行),且对于非文本的元素无效2.无固定高度的多行文本垂直居中css code:p.multi_line{border:1px solid gray;width:100px;/*key code:*/padding-top:30px;padding-bottom:30px;
}html code:我是多行文本!我宽100px但是没有固定高度!跪求垂直居中!summary:(1)key:令上内边距和下内边距相等。值是多少无所谓,相等即可,使用上下外边距相等也可(2)优点:块元素和行内元素均适用此方法,非文本元素也可以使用,并且在主流浏览器中适用(3)缺点:无法设置高度3.将固定高度的容器模拟表格布局实现垂直居中css code:div.wrap1{border:1px solid black;/*key code:*/display:table;height:300px;
}div.wrap2{/*key code:*/display:table-row;
}div.wrap3{/*key code:*/display:table-cell;vertical-align:middle;
}div.maincontent{width:350px;background-color:black;color:white;/*key code:*/height:90px;/*less than wrap1.height*/}html code:我老爸高300px,我自己是350 X 90 px,我也可以居中啦哇哈哈,可是别在IE6/7下看我噢 