So zentrieren Sie schnell ein Element:

Infrastruktur-Setup:

Grundlegende Stileinstellungen:

 

1. Flex-Layout (flexibles Box-Modell)

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

   

 2. Absolute Positionierung und Marge

 .align-2{
           position:relative;
        }
 .align-2 .box{
          position:absolute;
          left:50%;
          top:50%;
          margin-left:-20px;
          margin-top:-20px;
        }

 3. Absolute Positionierung und Transformation,

 .align-3{
            position:relative;
         }
 .align-3 .box{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%, -50%);
         } 

4. Absolute Positionierung und automatischer Rand

 .align-4{
            position:relative;
         }
 .align-4 .box{
            position:absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            margin:auto;
         }

 

 5. Rand des Boxmodells 

   .align-5 .box{
           margin-left:55px;
           margin-top:55px; 
          }

 6. Rasterlayout (Gitterboxmodell)

     .align-6{
           display:grid;
         }
     .align-6 .box{
            align-self: center;
            justify-self: center;
          }

7. Zentrieren Sie den Text:

            Horizontal zentrieren: text-align: center;

            Vertikale Zentrierung: Zeilenhöhe: 150 Pixel; (im Einklang mit der Höhe des Elements selbst)

 .align-7{
            text-align: center;
            line-height: 150px;;
        }

Endeffekt: