Comment centrer le positionnement absolu CSS ? Quatre méthodes de mise en œuvre du positionnement et du centrage absolus CSS

Le centrage est souvent utilisé lors de la mise en page CSS sur des pages Web. Parmi eux se trouve le positionnement absolu CSS. Alors, comment réaliser le centrage avec le positionnement absolu CSS ? L'article d'aujourd'hui vous présentera comment implémenter le positionnement et le centrage absolus en CSS.

Manuel recommandé :Manuel CSS en ligne

Il existe de nombreuses façons d'implémenter le positionnement et le centrage absolus CSS. Ci-dessous, je vais vous présenter comment procéder. Implémenter le positionnement et le centrage absolus CSS. Quatre méthodes.

1. L'utilisation du positionnement et du centrage absolus CSS traditionnels avec une bonne compatibilité :

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

Remarque : Cette méthode présente un inconvénient évident, à savoir que la taille de l'élément doit être connue à l'avance. Sinon, l’ajustement des valeurs de marge négatives ne pourra pas être précis. A cette époque, il est souvent nécessaire de l’obtenir avec l’aide de JS.

2. L'émergence de CSS3 a conduit à une meilleure solution, qui consiste à utiliser la transformation au lieu de la marge. La valeur en pourcentage du décalage de traduction dans la transformation est relative à sa propre taille. et centrer comme ceci :

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

3. Margin:auto réalise le centrage des éléments en position absolue (positionnement 0 position pour haut, bas, gauche et droite ; marge : auto)

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

4. Utilisez le modèle de boîte CSS3 : mise en page flexible Implémentez le positionnement et le centrage absolus CSS. Cette situation peut être utilisée quelle que soit la version inférieure des navigateurs.

Articles connexes recommandés :
1.Comment effectuer un positionnement absolu en CSS
2.Expliquez le positionnement relatif et le positionnement absolu dans CSS avec exemples Utilisation et différence (images et texte)
3.Tableau détaillé des avantages et des inconvénients de la technologie de positionnement et de centrage absolu CSS
Recommandations vidéo associées :
1.Tutoriel vidéo CSS - Jade Girl Heart Sutra Edition

Cet article se termine ici Pour plus d'informations sur le positionnement, veuillez vous référer au manuel CSS. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!