WEB前端css之所有居中问题的总结

横向居中

    行内 行内块 文字 在块级里面横向居中:

                                   给块级元素添加text-align:center

    行内 文字 行内块 在行内块里面横向居中:

                                   给行内块添加text-align:center

    块级在另外一个块级里面横向居中:

                                   给内部的块级加宽度(小于外部)

                                   同时设置margin:0 aut

纵向居中:

    行内 文字 在块级里面纵向居中:

                                给当前块级+line-height=当前块级元素高度 前提是行内和文字是单行

    行内块在块级里面纵向居中:

                                给当前行内块+vertical-align:middle

                               给外部的块级+line-height:块级的高度(不一定百分百生效)

   块级元素在另一个块级里面纵向居中:

                                只能通过定位 top 50% margin-top:-自身高度的一半

绝对居中:

    1:分开横向居中+纵向居中

          top:50%;margin-top:-自身高度的一半

          left:50%;margin-left:-自身宽度的一半

   2:left:0;  top:0;  right:0;  bottom:0;

         magin:auto

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值