div垂直水平居中代码实例_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:29:52

original

1435 Les gens l'ont consulté

div垂直水平居中代码实例:
本章节分享一段代码实例，它演示了如何让div实现全屏垂直水平居中和指定元素的内容垂直水平居中。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#main{  position:absolute;  background-color: blue;  width:400px;  height:200px;  left:50%;  top:50%;  margin-left:-200px;  margin-top:-100px;  border:1px solid #00F;}#content{  position:absolute;  background-color:yellow;  width:200px;  height:100px;  left:50%;  top:50%;  margin-left:-100px;  margin-top:-50px;}</style><body><div id="main">  <div id="content"></div></div></body></html>

Copier après la connexion

以上代码实现了我们的要求，能够实现居中效果，代码比较简单，就是基本的逻辑问题。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13332

更多内容可以参阅:http://www.softwhy.com/divcss/

Étiquettes associées：

div垂直水平居中代码实例

source：php.cn

Article précédent：求教一个问题，当鼠标放上去在改变背景图片时，同时改变div里面的图片，怎么实现？_html/css_WEB-ITnose Article suivant：【CSS趣味】flex 缺省的 auto 跟 0 到底有何区别_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