编程知识 cdmana.com

Summary of element center display method

Elements centered

  • Block level elements are displayed in the middle

    • stay body Some element of (box1)

      .box1 {
        margin: 0 auto;
      }
      
    • Show vertically in the parent container by absolute positioning

      //  Method 1 :
      .box1 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
      
      //  Method 2 :( More concise )
      .box1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      
    • Elastic box model ( In the middle )

      //  You can give box1 The parent element of is set to flex
      .xxx {
        display: flex;
        justify-content: center;
        align-items: center
      }
      
  • The text is displayed in the middle

    • Horizontal center

      //  Set the parent block element with 
      {
      	text-align: center;
      }
      
    • Vertical center

      //  Set the parent block element with 
      {
      	height: 50px;
      	line-height: 50px;
      }
      

What's missing or wrong , Please correct me. . Learning together 、 Common progress .

版权声明
本文为[King of stomach]所创,转载请带上原文链接,感谢

Scroll to Top