Home >Web Front-end >HTML Tutorial >Pure CSS to achieve DIV vertical centering effect (valid in all browsers)_html/css_WEB-ITnose
Pure CSS to achieve DIV vertical centering effect (valid in all browsers)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:27:43958browse
Recently modified a user login page of the company, and the login box needs to be centered horizontally and vertically on the page. Because of my limited knowledge, I racked my brains and thought of using absolute positioning percentage position minus half of its own length and width to achieve it. Vertically and horizontally centered, the code is as follows;
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> After testing, it is valid for Google, IE8, IE6, Firefox, and 360 (other browsers should go without saying)
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Drop-down DIV CSS JS secondary tree menu_html/css_WEB-ITnoseNext article：Drop-down DIV CSS JS secondary tree menu_html/css_WEB-ITnose