元素居中方法

一、水平居中方式

  行内元素:text-alien:center

  块元素:

    -已知宽度:

      1)margin:0 auto;

      2)position+margin组合(left:50%;margin-left:-?px)

    -未知宽度:

      1)*display:inline/inline-block

           *text-alien:center

      2)position:relative;

         left:50%; transform:translateX(-50%)

      3)flex布局

        display:flex;justify-content:center

二、垂直居中

已知高度:

  对于单行文本 

    1)inline-height:?px  (设置为和高度相等)

  块元素:

    1)position+margin

未知高度:

  行内块元素

    1)vertical-align:middle

  块元素:

    1)给父元素display:table,子元素display:table-cell

    2)flex布局

    3)position+translate

    

      

 

posted @ 2019-09-25 15:18  我就是要学习  阅读(171)  评论(0编辑  收藏  举报