- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
P粉2014488982023-08-25 15:00:14
transform translateX/translateY :Exemple ici / Exemple plein écran
Dans les navigateurs pris en charge (la plupart d'entre eux), vous pouvez utiliser top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) pour centrer dynamiquement l'élément verticalement/horizontalement.
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Exemple ici / Exemple plein écran
Dans les navigateurs pris en charge, définissez le display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center pour le centrage horizontal. N'oubliez pas d'ajouter les préfixes du fournisseur pour une prise en charge supplémentaire du navigateur (voir exemple).
html, body, .container {
height: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
table-cell/vertical-align: middle :Exemple ici / Exemple plein écran
Dans certains cas, vous devrez vous assurer que le html/body element's height is set to 100%.
Pour l'alignement vertical, définissez le width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.
Pour le centrage horizontal, vous pouvez soit ajouter text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block niveau.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
50% du haut avec déplacement :Exemple ici / Exemple plein écran
Cette approche suppose que le texte a une hauteur connue - dans ce cas, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px.
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
line-height (la moins flexible - non suggérée) :Dans certains cas, l'élément parent aura une hauteur fixe. Pour un centrage vertical, il suffit de définir une valeur line-height sur l'élément enfant égale à la hauteur fixe de l'élément parent.
Bien que cette solution fonctionne dans certains cas, il convient de noter qu'elle ne fonctionne pas lorsqu'il y a plusieurs lignes de texte - comme ceci .
.parent {
height: 200px;
width: 400px;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
Les méthodes 4 et 5 ne sont pas les plus fiables. Choisissez l'un des 3 meilleurs.
P粉7627302052023-08-25 11:59:53
S'il s'agit d'une ligne de texte et/ou d'une image, c'est facile à faire. Utilisez simplement :
text-align: center; vertical-align: middle; line-height: 90px; /* The same as your div height */
C'est tout. S'il peut s'agir de plusieurs lignes, c'est un peu plus compliqué. Mais il existe une solution sur http://pmob.co.uk/. Recherchez « alignement vertical ».
Comme il s'agit généralement de hacks ou d'ajouts de divs complexes... Je le fais généralement en utilisant un tableau avec une seule cellule... pour que cela reste aussi simple que possible.
À moins que vous ayez besoin de le faire fonctionner sur des navigateurs antérieurs comme Internet Explorer 10, vous pouvez utiliser Flexbox. Il est largement pris en charge par tous les principaux navigateurs actuels . Fondamentalement, le conteneur doit être désigné comme conteneur flexible et centré le long de ses axes principal et transversal :
#container {
display: flex;
justify-content: center;
align-items: center;
}
Spécifiez une largeur fixe pour un élément enfant, appelé "élément flexible" :
#content {
flex: 0 0 120px;
}
Exemple : http://jsfiddle.net/2woqsef1/1/
Pour emballer le contenu, c'est encore plus simple : il suffit de supprimer la ligne flex: ... de l'élément flexible, et il est automatiquement emballé sous film rétractable.
Exemple : http://jsfiddle.net/2woqsef1/2/
Les exemples ci-dessus ont été testés sur les principaux navigateurs, notamment MS Edge et Internet Explorer 11.
Une note technique si vous avez besoin de le personnaliser : à l'intérieur de l'élément flex, puisque cet élément flex n'est pas lui-même un conteneur flex, l'ancienne méthode CSS non-flexbox fonctionne comme prévu. Cependant, si vous ajoutez un élément flex supplémentaire. Dans le conteneur flex actuel, les deux éléments flex seront placés horizontalement. Pour les placer verticalement, ajoutez le flex-direction: column; au conteneur flex. Voici comment cela fonctionne entre un conteneur flex et ses éléments enfants immédiats.
sur l'élément flexible pour occuper tout l'espace supplémentaire dans les quatre directions, et les marges uniformément réparties rendront l'élément flexible centré dans toutes les directions. Cela fonctionne sauf lorsqu'il y en a. il y a plusieurs éléments flexibles. De plus, cette technique fonctionne sur MS Edge mais pas sur Internet Explorer 11.center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto.
, et cela fonctionne bien même dans les navigateurs plus anciens tels que Internet Explorer 10 et Internet Explorer 11. Il peut prendre en charge plusieurs lignes de texte :transform
position: relative; top: 50%; transform: translateY(-50%);Exemple :
https://jsfiddle.net/wb8u02kL/1/
Largeur du film rétractable :
position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%);Exemple :
https://jsfiddle.net/wb8u02kL/2/
Si la prise en charge d'Internet Explorer 10 est nécessaire, alors flexbox ne fonctionnera pas et la méthode ci-dessus ainsi que la méthode line-height fonctionneront. Sinon, flexbox ferait l'affaire.