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

css水平居中，竖直居中技巧_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:46:58
original
1107 Les gens l'ont consulté

要点1：容器设置【position: absolute;】

要点2：容器设置【top: 50%;left: 50%;】

要点3：要知道容器实际的width和heigh（可以是预设的，也可以是运行时动态获取到的）

要点4：水平居中：margin-left = -1*（width/2），例如width是280px，则设置【margin-left:140px;】

要点5：竖直居中：margin-top = -1*（height/2），例如height是110px，则设置【margin-top:55px;】

 

例子如下：

html

<html><head></head><body><div id="alert">    <div class="alert-header" style="display: none;">信息提示</div>    <div class="alert-message">GOOD</div>    <div class="alert-footer">        <div class="btn-close">确定</div>    </div></div></body></html>
Copier après la connexion

css

    #alert {        position: absolute;        width: 280px;        top: 50%;        left: 50%;        margin-top: -55px;        margin-left: -140px;        border-radius: 5px;        background: #fff;        z-index: 1000000;        padding: 20px;    }
Copier après la connexion

 运行效果

运行时实际尺寸

Étiquettes associées：
css水平居中，竖直居中技巧
source：php.cn
Article précédent：iReport-关于部署在weblogic中的项目用IE访问页面加载慢但是用火狐或者谷歌浏览器访问很快的问题_html/css_WEB-ITnose Article suivant：HTML5属性_html/css_WEB-ITnose
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
Centrer le contenu des cellules de la grille Je souhaite centrer le contenu à l'intérieur d'un élément de grille, centré horizontalemen...
Depuis 2023-09-15 10:34:15
0
1
274
Éléments de grille CSS pleine largeur utilisant place-content : center J'ai centré le div verticalement et horizontalement dans un conteneur fixe en utilisant le...
Depuis 2023-09-05 17:54:47
0
2
227
Comment ajouter la classe CSS Tailwind pour les balises <html> et <body> dans Nuxt 3 ? J'essaie de créer une page d'erreur 404 personnalisée en utilisant Tailwind pour mon appli...
Depuis 2023-09-04 19:20:05
0
1
315
Comment centrer le texte (horizontalement et verticalement) à l'intérieur d'un bloc div ? J'ai un paramètre d'affichage : bloc (90 px de hauteur et de largeur) et j'ai du texte à l...
Depuis 2023-08-24 16:58:26
0
2
276
Obtenir un alignement central horizontal des éléments Comment centrer un &lt;div&gt; horizontalement à l'intérieur d'un autre &lt;di...
Depuis 2023-08-21 10:25:54
0
2
236
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！