javascript - CSS contrôle que le div soit toujours centré horizontalement et verticalement, et la taille de ce div est différente

Question

Le contrôle CSS ajoute un div avec un nom de classe unifié. Je souhaite qu'il soit affiché horizontalement et verticalement au centre. Cependant, la taille du div est différente, donc le CSS ne peut pas être corrigé. Quelqu'un d'autre a-t-il de bonnes idées ?

迷茫 · Answer

mise en page flexible

过去多啦不再A梦 · Answer

L'une consiste à utiliser la disposition flexible pour centrer les éléments enfants horizontalement et verticalement ; l'autre consiste à utiliser le positionnement absolu et la transformation pour déplacer la position.
.flex {
display: flex;
align-items: center;
justifier-content: center;
}

.one {
position : absolue;
gauche : 50%;
haut : 50%;
transformation : traduire (-50%, -50%);
}

Portail

扔个三星炸死你 · Answer

Centrage vertical :
Méthode de mise en page de table, méthode de bloc en ligne
Méthode de positionnement absolu
Centrage de la fenêtre d'affichage
Solution basée sur Flexbox

过去多啦不再A梦 · Answer

Une question courante, quelqu'un à l'étranger a réglé le centrage vertical dans diverses situations : https://css-tricks.com/center...

Nous générons même du code directement pour vous et déterminons s'il est compatible avec IE : http://howtocenterincss.com/

Vous pouvez également consulter la version traduite : https://github.com/chenjsh36/...

Après avoir lu ceci, je n'ai plus à me soucier des divers problèmes de centrage vertical 23333

黄舟 · Answer

Ajouter display:flex,align-items:center à l'élément parent

巴扎黑 · Answer

Vous pouvez utiliser la disposition élastique ci-dessus, mais elle ne prend pas en charge les navigateurs de bas niveau
Vous pouvez utiliser le positionnement absolu pour centrer le p verticalement et horizontalement

.

p{
    position: absolute;  
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;  
    width: 620px;
    height: 618px;
    margin: auto;  
    padding: 30px 0;
    box-sizing: border-box;
}

三叔 · Answer

La mise en page flexible est également recommandée

PHP中文网 · Answer

Diverses couches élastiques ? Divers calculs ? Centrer à gauche et à droite est facile, juste

margin:0 auto;
c'est bien, mais monter et descendre est un peu plus gênant. Même si c’est gênant à bien des égards

1. À en juger par js, c'est relativement fastidieux, donc je n'entrerai pas dans les détails. Les amis qui sont simples avec js peuvent le faire

.

2, désactivé:table. Cela nécessite la coopération de deux DOM. Ce n'est pas recommandé. La compatibilité principale est également moyenne.

3. Utilisez transfrom si vous ne considérez pas la compatibilité et ne connaissez pas la hauteur, c'est fortement recommandé. La méthode approximative est la suivante :

.dom{

Définissez vous-même la largeur
position : absolue;
transform: translation(-50%, -50%);
gauche : 50%;
haut : 50%;
}
Je connais la largeur, mais je je ne sais pas à quel point je le recommande

4. Si vous connaissez la largeur et la hauteur, vous n'avez pas besoin de ce qui précède, car celui-ci n'est pas compatible. Le code est le suivant :

.

.dom{

Définissez vous-même la largeur et la hauteur
position : absolue;
marge : auto;
haut:0;
droite : 0;
bas:0;
gauche : 0;
}
5, disposition flexible, en plus de la compatibilité, tout le reste va bien.


    这是文字信息

.masque{

position: fixed;
top:0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.5);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;

}

.mask-con{

width: 200px;
/*height: 90px;*/
height: auto;
background: #fff;
font-size: 14px;
padding: 20px;
border-radius:10px;

}

6. Si vous envisagez la compatibilité ====> veuillez consulter le premier élément. [Quel âge a-t-il ? Toujours en considérant IE789, le support principal d'IE7 DOM1 n'est pas très bon, donc. . . 】
7, rien d'autre. Ceux ci-dessus sont certainement suffisants. S'il y en a de bons, ajoutez-les s'il vous plaît

滿天的星座 · Answer

Élément parent

{
 position: relative;
}

Éléments enfants

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

習慣沉默 · Answer

Ajout de trois méthodes supplémentaires.

Centrer un élément de largeur et hauteur connues en utilisant un positionnement absolu ou fixe :

.horizontal-and-vertical-center {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Adopte display: table élément centré sur la mise en page, prend en charge une largeur et une hauteur indéfinies et est compatible avec IE8+ et d'autres navigateurs modernes :

.table {
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
 
.cell {
    display: table-cell;
    vertical-align: center;
}
 
.horizontal-and-vertical-center {
    width: 800px;
    margin: 0 auto;
    /* 如果不定宽度的话用 inline-block 并且外层 text-align: center */
}

:before Le pseudo-élément étend la hauteur de ligne (méthode utilisée par AmazeUI dans les composants modaux et prend en charge la largeur et la hauteur incertaines, IE8+) :

.am-modal {
    /* ... */
    text-align: center;
    /* ... */
}

.am-modal:before {
    content: "0B";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.am-modal-dialog {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    /* ... */
}

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket