Rumah > Artikel > hujung hadapan web > 纯CSS实现DIV垂直居中效果(所有浏览器有效)_html/css_WEB-ITnose
纯CSS实现DIV垂直居中效果(所有浏览器有效)_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:27:43938semak imbas
最近修改公司一个用户登录页面,需要实现登录框在页面水平,垂直居中.因为才疏学浅,绞尽脑汁才想到利用绝对定位+百分比位置减去自身一半的长宽来实现垂直水平居中的,代码如下;
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均有效(其他浏览器应该不用说了吧)
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：下拉的DIV+CSS+JS二级树型菜单_html/css_WEB-ITnoseArtikel seterusnya：JS+CSS制作的DIV层最小化和随意拖拽排序功能_html/css_WEB-ITnose