如何实现div水平和垂直居中效果_html/css_WEB-ITnose
Jun 24, 2016 am 11:41 AM
如何实现div水平垂直和居中效果:
有时候可能我们需要让一个div在它的父容器中居中显示。先看代码实例再进行分析。
代码实例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:500px; height:500px; border:1px solid red; position:absolute;}.children{ width:200px; height:100px; background-color:green; position:absolute; top:50%; left:50%; margin:-50px 0 0 -100px;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html>上面代码中，使用了position属性实现对象的垂直居中效果。在对子对象使用top:50%和left:50%之后，并没有实现对象的居中，而是实现了对象左上角那一点的垂直居中，图示如下:
我们需要的是对象的中心实现居中，这样的话整个对象就居中了，于是使用margin:-50px 0 0 -100px让对象向上和向左分别移动对象高度的一半和宽度的一半即可。
特别说明:
父对象采用绝对定位，要不然子对象绝对定位会以窗口为参考对象。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/586.html
最为原始地址是:http://www.softwhy.com
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Mar 04, 2025 pm 12:32 PM
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Mar 04, 2025 pm 02:39 PM
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer?
Mar 18, 2025 pm 02:51 PM
Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer?
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?
Mar 12, 2025 pm 04:08 PM
Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?
