masyarakat

Belajar

Perpustakaan Alatan

Alat AI

Masa lapang

Melayu

Rumah > hujung hadapan web > html tutorial > 纯CSS实现DIV垂直居中效果(所有浏览器有效)_html/css_WEB-ITnose

纯CSS实现DIV垂直居中效果(所有浏览器有效)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2016-06-24 12:27:43

asal

1022 orang telah melayarinya

最近修改公司一个用户登录页面,需要实现登录框在页面水平,垂直居中.因为才疏学浅,绞尽脑汁才想到利用绝对定位+百分比位置减去自身一半的长宽来实现垂直水平居中的,代码如下;

 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>

Salin selepas log masuk

经测试google,IE8,IE6,火狐,360均有效(其他浏览器应该不用说了吧)

Label berkaitan：

纯CSS实现DIV垂直居中效果(所有浏览器有效)

Artikel sebelumnya：下拉的DIV+CSS+JS二级树型菜单_html/css_WEB-ITnose Artikel seterusnya：JS+CSS制作的DIV层最小化和随意拖拽排序功能_html/css_WEB-ITnose

Kenyataan Laman Web ini

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 terbaru oleh pengarang