元素水平垂直居中的方式有哪些

Posted 2021-03-22 xuman0927

元素水平垂直居中的方式有哪些？

• absolute加margin方案

• fixed 加 margin 方案

• display:table 方案

• 行内元素line-height方案

• flex 弹性布局方案

• transform 未知元素宽高解决方案

• absolute加margin方案

      div{
          position: absolute;
          width: 100px;
          height: 100px;
          left: 50%;
          top: 50%:
          margin-top: -50px;
          margin-left: -50px;
      }
  

  fixed 加 margin 方案

      div{
          position: fixed;
          width: 100px;
          height: 100px;
          top: 0;
          right:0;
          left: 0;
          bottom: 0;
          margin: auto;
      }
  

  display:table 方案

      div{
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          width: 100px;
          height: 100px;
      }
  

  行内元素line-height方案

      div{
          text-align: center;
          line-height: 100px;
      }
  

  flex 弹性布局方案

      div{
          display: flex;
          align-items: center;
          justify-content:center
      }
  

  transform 未知元素宽高解决方案

      div{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%)
      }