Maison > Questions et réponses > le corps du texte
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é.
迷茫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>
过去多啦不再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
扔个三星炸死你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
过去多啦不再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
巴扎黑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;
}
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
.
.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="mask-con">
这是文字信息
</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
滿天的星座2017-06-26 10:54:35
Élément parent
{
position: relative;
}Éléments enfants
{
position:absolute;
top:50%;
left:50%;
transform:(-50%,-50%);
}習慣沉默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;
/* ... */
}