Maison >interface Web >tutoriel HTML >纯CSS实现DIV垂直居中效果(所有浏览器有效)_html/css_WEB-ITnose
纯CSS实现DIV垂直居中效果(所有浏览器有效)_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:27:43958parcourir
最近修改公司一个用户登录页面,需要实现登录框在页面水平,垂直居中.因为才疏学浅,绞尽脑汁才想到利用绝对定位+百分比位置减去自身一半的长宽来实现垂直水平居中的,代码如下;
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 .test{ 9 position:absolute;10 width:200px;11 height:200px;12 background:#999;13 top:50%;14 left:50%;15 margin-top:-100px;16 margin-left:-100px;17 </style>18 </head>19 20 <body>21 22 <div class="test"></div>23 </body>24 </html> 经测试google,IE8,IE6,火狐,360均有效(其他浏览器应该不用说了吧)
Déclaration：
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
Article précédent：下拉的DIV+CSS+JS二级树型菜单_html/css_WEB-ITnoseArticle suivant：JS+CSS制作的DIV层最小化和随意拖拽排序功能_html/css_WEB-ITnose