Maison > interface Web > tutoriel CSS > le corps du texte

Exemple de centrage vertical d'un div dans un autre div

高洛峰
Libérer: 2017-03-06 14:35:20
original
1411 Les gens l'ont consulté

Connaissances de base : centrer verticalement un div au sein d'un autre div

Méthode 1 :

<span style="text-decoration: none;">.parent {<br>            width:800px;<br>            height:500px;<br>            border:2px solid #000;<br>            position:relative;<br> }<br> .child {<br>             width:200px;<br>             height:200px;<br>             margin: auto;  <br>             position: absolute;  <br>             top: 0; left: 0; bottom: 0; right: 0; <br>             background-color: red;<br>}<br></span>
Copier après la connexion

Méthode 2 :

<span style="text-decoration: none;">.parent {<br>             width:800px;<br>             height:500px;<br>             border:2px solid #000;<br>             display:table-cell;<br>             vertical-align:middle;<br>             text-align: center;<br>         }<br>  .child {<br>             width:200px;<br>             height:200px;<br>             display:inline-block;<br>             background-color: red;<br>         }<br></span>
Copier après la connexion

Méthode 3 :

<span style="text-decoration: none;">.parent {<br>            width:800px;<br>            height:500px;<br>            border:2px solid #000;<br>            display:flex;<br>            justify-content:center;<br>           align-items:center;<br>        }<br> .child {<br>            width:200px;<br>            height:200px;<br>            background-color: red;<br>        }<br></span>
Copier après la connexion

Méthode 4 :

<span style="text-decoration: none;">.parent {<br>             width:800px;<br>             height:500px;<br>             border:2px solid #000;<br>             position:relative;<br>        }<br> .child {<br>             width:300px;<br>             height:200px;<br>             margin:auto;<br>             position:absolute;/*设定水平和垂直偏移父元素的50%,再根据实际长度将子元素上左挪回一半大小*/<br>            left:50%;<br>            top:50%;<br>            margin-left: -150px;<br>            margin-top:-100px;<br>            background-color: red;<br>        }<br></span>
Copier après la connexion

Pour plus d'exemples de centrage vertical d'un div dans un autre div, veuillez faire attention au site Web PHP chinois pour les articles connexes !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!