实现DIV页面垂直居中行之有效的办法

后浪云

2023-3-2

网站和优化

本文向大家简单介绍一下DIV页面垂直居中方法，其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

DIV页面垂直居中方法

DIV页面垂直居中于浏览器，一直是新手朋友比较头疼的问题。其实解决的思路是这样的：首们需要position:absolute;绝对定位。而DIV页面的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

　如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了DIV页面垂直居中于浏览器的样式编写。

例子:

 
 
 
  
  
  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  
  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  
  
  <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  
  
  <head> 
  
  
  <metahttp-equivmetahttp-equiv="Content-Type" 
  
  
  content="text/html;charset=utf-8"/> 
  
  
  <title>25175.com</title> 
  
  
  <styletypestyletype="text/css"> 
  
  
   
  
  
  DIV{  
  
  
  position:absolute;  
  
  
  top:50%;  
  
  
  left:50%;  
  
  
  margin:-150px00-200px;  
  
  
  width:400px;  
  
  
  height:300px;  
  
  
  border:1pxsolidred;  
  
  
  }  
  
  
  </style> 
  
  
  </head> 
  
  
  <body> 
  
  
  <DIV>DIV页面垂直居中</DIV> 
  
  
  </body> 
  
  
  </html>

【编辑推荐】

深入剖析DIV页面布局与规划思想
JavaScript代码轻松实现DIV圆角
深入学习CSS DIV相对定位语法
CSS属性display:inline-block使用揭秘
Firefox、IE7、IE6浏览器兼容问题概念解析

作者：后浪云

链接：https://www.idc.net/help/397166/

文章版权归作者所有，未经允许请勿转载。

THE END