css几种方法使元素水平垂直居中

来源:互联网 发布:php打印空心菱形 编辑:程序博客网 时间:2024/05/30 05:21

闲来无事,好久没写css代码,感觉当初用习惯的,现在都忘了,现在自己网罗资料加上自己理解,来总结一下。

元素水平居中

先判断元素类型,若为块级元素,可以使用margin:0 auto;当然也可以将它变成内联块性质 display:inline-block,再用法二。

                                若为内联块元素,给它的父级设置text-align:center。’

元素垂直居中

可以使用display:table-cell,外加vertical-align:middle.就可以搞定。

当然元素若有固定高,也可以设置height:2px;line-height:2px.让元素或文字垂直居中。


我觉得用以上方法使元素水平垂直居中,比较简单。当然固定宽高的元素,也可以使用绝对定位或相对定位的方法

即设置元素水平位置:父级宽度*50%-元素宽度*50%,设置元素垂直位置:父级高度*50%-元素高度*50%,

我用的比较少,当然这也不失为一种方法。

若要元素既水平,又垂直居中,把方法结合使用即可,但元素性质要一致,否则不起效果。

0 0