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

闲来无事,好久没写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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值