Teilen Sie sechs Methoden der vertikalen und horizontalen Zentrierung in CSS

Fasst mehrere Möglichkeiten zur CSS-Zentrierung zusammen. Hinweis: * ist die übliche Methode, „wrap“ ist der Container und „div“ ist das zu zentrierende Element.

*1.Absolute Positionierung, der folgende Code kann implementiert werden, wenn die Breite und Höhe bekannt sind, oder Sie können negative Ränders verwenden; 🎜>

.div { 
    width: 200px;
    height: 200px;
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

2. Ohne die Breite und Höhe des Elements zu kennen, stellen Sie einfach fest, dass ein bestimmtes Div die Hälfte seines übergeordneten Elements ausmacht, horizontal und vertikal zentriert und im Verhältnis zur Größe des Elements vergrößert oder verkleinert wird übergeordnetes Element.

.div{
    position: absolute;
    left: 30%;
    right:30%;
    top: 25%;
    bottom:25%;
}

*3.translate, wenn die Breite bekannt und die Höhe unbekannt ist

.wrap{
    width:200px;//也可以不写，默认占总宽度的50%
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

4.table-cell, wenn die Höhe des Div selbst unbekannt ist und nur Vertikale Zentrierung wird erreicht, ps, in diesem Fall beträgt die Div-Breite 100 %

.wrap{//外层容器
    display: table;
}
.div{//内层容器
    display: table-cell; 
    vertical-align: middle; 
}

*5.flex-Layout Wenn die Breite nicht festgelegt ist, legen Sie einfach display:flex im übergeordneten Container fest.

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

6. Hack-Methode, seien Sie gut in der Verwendung von

:after.

.wrap {  
    text-align: center; 
    overflow: auto; 
}   
.wrap:after, 
.div { 
    display: inline-block; 
    vertical-align: middle; 
}   
.div:after { 
    content: ''; 
    height: 100%; 
    margin-left: -0.25em; /* 需要根据不同的字号做调整 */ 
}   
.wrap { 
    max-width: 99%; /* 防止文档过长时会到容器的顶部 */ 
    max-width: calc(100% - 0.25em) /* Only for IE9+ */  
}

Das obige ist der detaillierte Inhalt vonTeilen Sie sechs Methoden der vertikalen und horizontalen Zentrierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!