recherche

Maison  >  Questions et réponses  >  le corps du texte

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

Le contrôle CSS ajoute un p avec un nom de classe unifié. Je souhaite qu'il soit affiché horizontalement et verticalement au centre. Cependant, la taille du p est différente, donc le CSS ne peut pas être corrigé.

欧阳克欧阳克2706 Il y a quelques jours1155

répondre à tous(10)je répondrai

  • 迷茫

    迷茫2017-06-26 10:54:35

    mise en page flexible

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
#main
{
    width:220px;
    height:300px;
    border:1px solid black;
    display:flex;
    justify-content:center;
    align-items:center;
}

#main p
{
    
}
</style>
</head>
<body>

<p id="main">
  <p style="background-color:coral;">红色</p>
</p>
</body>
</html>

    répondre
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-26 10:54:35

    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

    répondre
    0
  • 扔个三星炸死你

    扔个三星炸死你2017-06-26 10:54:35

    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

    répondre
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-26 10:54:35

    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

    répondre
    0
  • 黄舟

    黄舟2017-06-26 10:54:35

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

    répondre
    0
  • 巴扎黑

    巴扎黑2017-06-26 10:54:35

    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;
}

    répondre
    0
  • 三叔

    三叔2017-06-26 10:54:35

    La mise en page flexible est également recommandée

    répondre
    0
  • PHP中文网

    PHP中文网2017-06-26 10:54:35

    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.

    <p class="masque">

    <p class="mask-con">
    这是文字信息
</p>

    </p>

    .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

    répondre
    0
  • 滿天的星座

    滿天的星座2017-06-26 10:54:35

    Élément parent

    {
 position: relative;
}

    Éléments enfants

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

    répondre
    0
  • 習慣沉默

    習慣沉默2017-06-26 10:54:35

    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;
    /* ... */
}

    répondre
    0
  • Annulerrépondre