absolute和relative定位总结(水平居中和垂直居中)

relative:依据自身定位
absolute:依据最近一层的定位元素定位定位元素:

水平居中方法:

  • inline元素: text-align: center
  • block元素: margin: auto
  • absolute元素:left: 50% + margin-left 负值(需要知道子元素的宽)

垂直居中方法:

  • inline元素:line-height 的值等于height值
  • absolute元素: top: 50% + margin-top负值(必须要知道子元素的高)
  • absolute元素: transform(-50%,-50%)(不需要知道子元素的高):
    top、left设为50%,然后用transform: translate(-50%,-50%)
  • absolute元素: top, left, bottom, right = 0 + margin: auto(不需要知道子元素的高):
    top: 0; bottom: 0; left: 0; right: 0; margin: auto;

猜你喜欢

转载自blog.csdn.net/weixin_45745641/article/details/121359501
今日推荐