简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

垂直水平居中

WBOY
Libérer： 2016-10-09 08:31:49
original
788 Les gens l'ont consulté

这是body代码

1.垂直水平居中

 

解析：父元素relative 子元素absolute，子元素设置宽高，top和left设置为50%，margin-top和margin-left设置为高宽的一半乘以-1.

2.水平居中：

方法1：margin: 0 auto;

 

方法2：

解析：父元素relative，子元素absolute，子元素设置宽度，left：50%；margin-left：宽度的一半乘以-1；

3.垂直居中：

 

解析：父元素relative，子元素absolute，子元素设置高度，top：50%；margin-top：宽度的一半乘以-1；

Étiquettes associées：
垂直水平居中
source：php.cn
Article précédent：雪碧图应用 Article suivant：XHTML基础
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
Derniers articles par auteur
Derniers numéros
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
Changement de titre : Affichage vertical des produits Sur ma page Web, actuellement, les produits du projet sont répertoriés verticalement, lign...
Depuis 2024-04-05 09:17:50
0
1
3505
Titre du tableau pivoté verticalement, centré + aligné en bas, multi-navigateur J'ai un tableau avec des en-têtes pivotés qui ressemble à prévu dans Chrome, mais pas dans...
Depuis 2024-04-04 16:45:25
0
1
330
Titre réécrit : centrez un élément carré ou circulaire HTML fixe horizontalement et verticalement une fois redimensionné. Comment centrer un élément HTML fixe carré ou circulaire de différentes tailles horizontal...
Depuis 2024-04-04 12:31:51
0
1
322
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
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！