HTML5网页设计

html_css

css实现水平和垂直居中

时间:2012-10-01 17:04来自:网络作者:未知点击:
有时候我们需要实现一个水平居中和垂直居中的效果。例如你想做一个网页版的PPT,你希望演示的内容区域总是居中。这里介绍一个纯css实现。

有时候我们需要实现一个水平居中和垂直居中的效果。例如你想做一个网页版的PPT,你希望演示的内容区域总是居中。这里介绍一个纯css实现。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>水平和垂直居中</title> 
  6. <style type="text/css"> 
  7.     body { 
  8.         padding: 0; 
  9.         margin: 0; 
  10.     } 
  11.      
  12.     #wrapper { 
  13.         width: 960px; 
  14.         margin: 10px auto; 
  15.         border: 1px solid #efefef; 
  16.         height: 600px; 
  17.         position: relative; 
  18.     } 
  19.      
  20.     #content { 
  21.         width: 600px; 
  22.         height: 400px; 
  23.         position: absolute; 
  24.         left: 50%; 
  25.         top: 50%; 
  26.         margin: -200px 0px 0px -300px; 
  27.         border: 1px solid #343434; 
  28.     } 
  29. </style> 
  30. </head> 
  31. <body> 
  32.     <div id="wrapper" class="clearfix"> 
  33.         <div id="content"> 
  34.         </div> 
  35.     </div> 
  36. </body> 
  37. </html> 

居中的原理其实很简单。首先使用绝对定位,使得内容区域的坐上顶点位于父容器的中心点上,然后分别向左和向上移动自己高度和宽度的一半。其中的数学原理就是: 

假设子容器居中,那么其左上角的顶点坐标为  [x,y] = [(父容器的宽度 - 子容器的宽度)/2,(父容器的高度 - 子容器的高度)/2] 

我们可以显示的使用javascript这样定位,但是使用css我们让浏览器的渲染引擎帮我们做了这件事。

当前文章地址:http://www.shejicool.com/web/html_css/349.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐