Comment puis-je aligner verticalement des éléments dans une division de conteneur ?

Patricia Arquette

Libérer： 2024-12-16 14:42:11

original

479 Les gens l'ont consulté

</p>
<h1>conteneur {</h1>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
height: 300px;

<br>body {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: table;
position: absolute;
height: 100%;
width: 100%;

}

conteneur {

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

}

Ici, l'élément body est défini comme un tableau et l'élément conteneur est une cellule de tableau. Le réglage de « vertical-align » sur « middle » aligne le conteneur verticalement dans le corps.

Quelle méthode choisir :

Pour plus de simplicité et d'efficacité, Flexbox est recommandé, notamment en raison de ses larges options de mise en page et de sa nature réactive. Flexbox est également largement pris en charge par les navigateurs, à l'exception des anciennes versions d'IE.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!