Heim > Artikel > Web-Frontend > 纯CSS实现DIV垂直居中效果(所有浏览器有效)_html/css_WEB-ITnose
纯CSS实现DIV垂直居中效果(所有浏览器有效)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:27:43926Durchsuche
最近修改公司一个用户登录页面,需要实现登录框在页面水平,垂直居中.因为才疏学浅,绞尽脑汁才想到利用绝对定位+百分比位置减去自身一半的长宽来实现垂直水平居中的,代码如下;
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均有效(其他浏览器应该不用说了吧)
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：下拉的DIV+CSS+JS二级树型菜单_html/css_WEB-ITnoseNächster Artikel：JS+CSS制作的DIV层最小化和随意拖拽排序功能_html/css_WEB-ITnose