Comment puis-je centrer le texte verticalement avec CSS?

j'ai un élément div qui contient du texte, et je veux aligner le contenu de cette div verticalement centre.

Voici mon style div:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Quelle est la meilleure façon de le faire?

1886
demandé sur Tom Aranda 2012-01-15 01:25:10
la source

30 ответов

vous pouvez essayer cette approche de base:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

cela ne fonctionne que pour une seule ligne de texte, parce que nous avons placé la hauteur de la ligne à la même hauteur que l'élément contenant la boîte.


une approche plus polyvalente

C'est une autre façon d'aligner le texte verticalement. Cette solution fonctionne pour une seule ligne et plusieurs lignes de texte, mais il nécessite encore un conteneur de hauteur fixe:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

le CSS ne dimensionne que le <div> , alignant verticalement le <span> en réglant la ligne <div> 'S hauteur égale à sa hauteur, et fait du <span> un bloc en ligne avec vertical-align: middle . Puis il remet la hauteur de la ligne à la normale pour le <span> , de sorte que son contenu circulera naturellement à l'intérieur du bloc.


simulation d'affichage de table

et voici une autre option, qui ne peut pas fonctionner sur les anciens navigateurs qui ne prennent pas en charge display: table et display: table-cell (essentiellement juste Internet Explorer 7). En utilisant CSS nous simulons le comportement de la table (puisque les tables supportent l'alignement vertical), et le HTML est le même que le second exemple:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

utilisant le positionnement absolu

cette technique utilise un élément absolument positionné réglant haut, bas, gauche et droite à 0. Il est décrit plus en détail dans un article de la revue Smashing, centre horizontal et Vertical absolu dans CSS .

2521
répondu Michiel van Oosterhout 2017-12-11 18:37:13
la source

une autre façon (pas encore mentionnée ici) est avec Flexbox .

il suffit d'ajouter le code suivant à l'élément conteneur :

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexbox demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

alternativement, au lieu d'aligner le contenu via le conteneur , flexbox peut également centrer le a article flex avec un marge automatique lorsqu'il n'y a qu'un seul article flex dans le conteneur flex (comme l'exemple donné dans la question ci-dessus).

pour centrer l'article flex à la fois horizontalement et verticalement il suffit de le placer avec margin:auto

Flexbox Démo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: toutes les dispositions ci-dessus s'appliquent aux pièces de centrage lorsqu'elles sont disposées en lignes horizontales . C'est aussi le comportement par défaut, car par défaut la valeur de flex-direction est row . Si, toutefois, les éléments flexibles doivent être disposés en colonnes verticales , alors flex-direction: column devrait être placé sur le conteneur pour placer l'axe principal comme colonne et en outre le justify-content et align-items propriétés maintenant travailler dans l'autre sens autour de avec justify-content: center centrage vertical et align-items: center centrage horizontal)

flex-direction: column démo

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

un bon endroit pour commencer avec Flexbox pour voir certaines de ses fonctionnalités et obtenir la syntaxe pour le soutien maximum de navigateur est flexyboxes

aussi, le soutien de navigateur de nos jours est très bon: caniuse

pour la compatibilité entre navigateurs pour display: flex et align-items , vous pouvez utiliser ce qui suit:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
1003
répondu Danield 2016-03-14 01:22:52
la source

vous pouvez facilement le faire en ajoutant le code CSS suivant:

display: table-cell;
vertical-align: middle;

ce qui signifie que votre CSS ressemble enfin à:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>
114
répondu Ariful Islam 2016-09-12 11:09:02
la source

pour référence et pour ajouter une réponse plus simple:

CSS pur:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Or as a SASS/ SCSS Mixin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

utiliser par:

.class-to-center {
    @include vertical-align;
}

Par Sébastien Ekström du blog Vertical align quoi que ce soit avec seulement 3 lignes de CSS :

cette méthode peut rendre les éléments flous en raison de l'élément placé sur un "demi-pixel". Une solution pour cela est de régler son élément parent à preserve-3d. Comme suit:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

nous vivons en 2015+ et Flex Box est supporté par chaque navigateur moderne majeur.

Ce sera la façon dont les sites web sont fabriqués à partir d'ici.

l'Apprendre!

101
répondu BAR 2016-06-29 20:58:39
la source

Tout le crédit va à ce lien propriétaire @Sébastien Ekström Lien ; s'il vous plaît aller à travers cela. Voir action codepen . En lisant l'article ci-dessus, j'ai aussi créé un violon de démonstration .

avec seulement trois lignes de CSS (à l'exclusion des préfixes fournisseurs) nous pouvons le faire à l'aide d'une transform: translateY centre verticalement tout ce que nous voulons, même si nous ne connaissons pas sa hauteur.

La transformation de propriété CSS est habituellement utilisée pour la rotation et l'échelle des éléments, mais avec sa fonction translateY nous pouvons maintenant aligner verticalement des éléments. Habituellement, cela doit être fait avec le positionnement absolu ou le réglage des hauteurs de ligne, mais ceux-ci exigent que vous sachiez la hauteur de l'élément ou fonctionne seulement sur le texte simple ligne, etc.

ainsi, pour faire ceci nous écrivons:

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

C'est tout ce dont tu as besoin. C'est une technique similaire à la position absolue méthode, mais avec le bon côté que nous n'avons pas à fixer de hauteur sur l'élément ou la propriété position-sur le parent. Il fonctionne directement de la boîte, même dans Internet Explorer 9 !

pour le rendre encore plus simple, nous pouvons l'écrire comme un mixin avec ses préfixes de vendeur.

52
répondu ankitd 2015-03-20 01:40:11
la source

Flexboxes qui ont été introduits dans CSS3 sont la solution:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Note : remplacer la ligne au-dessus de laquelle marquée comme importante par l'une de ces lignes, si vous voulez centrer le texte:

1) uniquement verticalement:

margin: auto 0;

2) uniquement horizontalement:

margin: 0 auto;

UPDATE : comme je l'ai remarqué, cette astuce fonctionne avec des grilles (afficher: grille), aussi.

30
répondu MAChitgarha 2018-05-30 15:11:35
la source

approche Flexible

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>
16
répondu Jürg 2016-08-29 19:13:53
la source

la solution acceptée comme la réponse est parfaite pour utiliser line-height la même que la hauteur de div, mais cette solution ne fonctionne pas parfaitement lorsque le texte est enveloppé ou est en deux lignes.

essayez celui-ci si le texte est enveloppé ou est sur plusieurs lignes à l'intérieur d'un div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

pour plus de référence, voir:

15
répondu Pranav Singh 2017-12-11 19:34:34
la source

Essayer cette solution :

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Construit en utilisant CSS+ .

11
répondu Marconi 2016-06-29 20:52:32
la source

vous pouvez également utiliser les propriétés ci-dessous.

display: flex; 
align-content: center; 
justify-content : center;
9
répondu satwik boorgula 2016-04-15 16:01:33
la source

Vous pouvez utiliser l'extrait de code suivant comme référence. Il fonctionne comme un charme pour moi:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

la sortie de l'extrait de code ci-dessus est la suivante:

Enter image description here

source code credit: Comment puis-je centrer le texte verticalement avec CSS? - Code Puran

9
répondu Akshay Pethani 2018-05-19 21:02:50
la source

une Autre façon:

Ne définissez pas l'attribut height de div , mais utilisez plutôt padding: pour obtenir l'effet. De la même manière que line-height, cela ne fonctionne que si vous avez une ligne de texte. Bien que de cette façon, si vous avez plus de contenu, le texte sera toujours centré, mais le div lui-même sera légèrement plus grand.

donc au lieu d'aller avec:

div {
  height:120px;
  line-height: 120px;
}

vous pouvez dire:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

cela positionnera le haut et le bas padding du div à 60px , et le gauche et le droit padding à zéro, faisant du div 120px (plus la hauteur de votre police) haut, et plaçant le texte verticalement centré dans le div.

8
répondu Eseirt 2015-04-17 19:40:08
la source

pour tous vos besoins d'alignement vertical!

déclarez ce Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

alors incluez-le dans votre élément:

.element{
    @include vertical-align();
}
5
répondu Gothburz 2015-10-27 20:04:20
la source

Je ne suis pas sûr que quelqu'un ait pris la route writing-mode , mais je pense qu'il résout le problème proprement et a un large support :

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

cela fonctionnera, bien sûr, avec toutes les dimensions dont vous avez besoin (en plus de 100% du parent). Si vous décommentez les lignes de Frontière, il sera utile de vous familiariser.

JSFiddle démo pour vous de jouer.

Caniuse support : 85.22% + 6.26% = 91.48% (même IE est dedans!)

4
répondu Carles Alcolea 2016-08-28 02:27:30
la source

encore meilleure idée pour ça. Vous pouvez faire comme ça aussi

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>
4
répondu Kumar 2018-05-24 14:01:02
la source

Pour une seule ligne de texte (ou un seul caractère) vous pouvez utiliser cette technique:

Il peut lorsque #box non-déterminés", 1519130920" hauteur relative en % .

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

voir la démo en direct à JsBin (plus facile à éditer CSS) ou JsFiddle (plus facile à changer la hauteur du cadre de résultat).

si vous voulez placer le texte intérieur en HTML, pas dans CSS, alors vous devez envelopper le contenu du texte dans un élément supplémentaire inline et éditer #box::after pour le faire correspondre. (Et, bien sûr, la propriété content: devrait être supprimée.)

Par exemple,

<div id="box"><span>TextContent</span></div>

Dans ce cas, #box::after doit être remplacé par #box span .

pour le soutien IE8 vous devez remplacer :: par : .

3
répondu user 2014-02-02 01:10:08
la source

le moyen simple et polyvalent est (comme michielvoo table approche):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

L'utilisation de cet attribut (ou d'une classe équivalente) sur une étiquette parent fonctionne même pour de nombreux enfants à aligner:

<parent ctrv>  <ch1/>  <ch2/>   </parent>
3
répondu bortunac 2015-03-20 01:37:01
la source

Essayez la propriété transform:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
3
répondu sstauross 2016-09-27 16:46:05
la source

une solution très simple et la plus puissante pour aligner verticalement le centre:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>
3
répondu Manish Kumar 2017-11-27 12:33:58
la source

le code suivant placera le div au milieu de l'écran quelle que soit la taille de l'écran ou div taille:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Voir plus de détails sur flex ici .

3
répondu Caner 2018-01-02 13:21:56
la source

j'ai vu les réponses précédentes, et elles ne fonctionneront que pour cette largeur d'écran (non responsive). Pour le responsive, vous devez utiliser flex.

exemple:

div{ display:flex; align-item:center;}
3
répondu Saravana priyan S 2018-05-19 21:00:32
la source

essayez le code suivant:

display: table-cell;
vertical-align: middle;

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
3
répondu Rafiqul Islam 2018-05-19 21:01:18
la source

je voudrais juste étendre la réponse de @michielvoo afin de libérer le besoin de ligne-hauteur et respiration de la hauteur de div. Il s'agit simplement d'une version simplifiée comme celle-ci:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

NOTE: une partie commentée de css est nécessaire pour fixed-height de l'enveloppe div .

2
répondu mPrinC 2017-03-16 13:23:38
la source

j'avais besoin d'une rangée d'éléphants cliquables, verticalement centrés, mais sans utiliser une table pour contourner une certaine bizarrerie Internet Explorer 9.

j'ai finalement trouvé le plus beau CSS (pour mes besoins) et il est grand avec Firefox, Chrome, et Internet Explorer 11. Malheureusement, Internet Explorer 9 se moque encore de moi...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

évidemment vous n'avez pas besoin des frontières, mais ils peuvent aider vous voyez comment cela fonctionne.

1
répondu Dave 2017-11-23 22:02:44
la source

le place dans button au lieu de div si vous ne vous souciez pas de son petit effet 3D visuel.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>
1
répondu URL87 2018-05-19 21:09:48
la source
.element{position: relative;top: 50%;transform: translateY(-50%);}

ajoutez ce petit code dans la propriété CSS de votre élément. C'est génial. L'essayer!

0
répondu Rahul 2015-03-20 01:43:18
la source

les nouveaux navigateurs prennent maintenant en charge la fonction CSS calc . Si vous ciblez ces navigateurs, vous pouvez regarder dans faire quelque chose comme cela:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

la clé est d'utiliser style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" à l'intérieur d'un div parent absolu ou relativement positionné.

0
répondu bruceceng 2016-08-29 19:01:44
la source

où que vous vouliez verticalement style Centre signifie que vous pouvez essayer display:table-cell et vertical-align:middle .

exemple:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
0
répondu Ayyappan K 2017-05-21 14:19:19
la source

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>
0
répondu antelove 2017-09-22 18:03:18
la source

Positionnement Absolu et d'Étirement

comme pour la méthode ci-dessus, celle-ci commence par le positionnement relatif et absolu sur les éléments parent et enfant. À partir de là, les choses diffèrent.

dans le code ci-dessous j'ai de nouveau utilisé cette méthode pour centrer l'enfant à la fois horizontalement et verticalement, bien que vous pouvez utiliser la méthode pour le centrage vertical seulement.

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

l'idée avec cette méthode est d'essayer d'obtenir l'élément enfant à étirer à tous les 4 bords en mettant le haut, le bas, à droite et à gauche vales à 0. Parce que notre élément enfant est plus petit que nos éléments parents, il ne peut pas atteindre les 4 bords.

le réglage automatique que la marge sur les 4 côtés cependant provoque des marges opposées pour être égales et affiche notre child div au centre du parent div.

malheureusement, le ci-dessus ne fonctionnera pas dans IE7 et ci-dessous et comme la méthode précédente, le contenu à l'intérieur de la div enfant peut devenir trop grand ce qui fait qu'il est caché.

0
répondu ArifMustafa 2018-07-03 18:34:01
la source

Autres questions sur html css vertical-alignment