css水平、垂直居中的写法

水平居中

  • 行内元素: text-align: center
  • 块级元素: margin: 0 auto
  • position:absolute +left:50%+ transform:translateX(-50%)
  • display:flex + justify-content: center

垂直居中

    • 设置line-height 等于height
    • position:absolute +top:50%+ transform:translateY(-50%)
    • display:flex + align-items: center
    • display:table+display:table-cell + vertical-align: middle;

 

posted @ 2020-11-27 02:24  GeorgeXu  阅读(236)  评论(0编辑  收藏  举报