当前位置: 秋叶网络博客 网络技术 ◊ 使元素在浏览器中通过div+css水平、垂直居中

使元素在浏览器中通过div+css水平、垂直居中

作者:秋了秋 发表时间:2014年08月02日

水平居中就不说了,很容易实现,只要在样式中加入红色的body{text-align: center;}就行了,表格居中只要加个<center><table></table></center>就行了,背景图片居中在样式中加入body{background: url(http://www.mizuiren.com/img/screenshot.png) #FFF no-repeat center;}就行了。

但要在浏览器中垂直居中就不那么容易了,这是个一直都在讨论的问题,不过还是可以硬性实现的,具体做法为:

css<style>
  body{text-align: center;}
  #center{ 
  MARGIN-RIGHT: auto;
  MARGIN-LEFT: auto; 
  height:100%;
  width:100%;
  vertical-align:middle;
  line-height:600px;

}
</style>

然后把文字或者图像放到<div id="center"></div>里面就行了,所谓硬性就是,line-height:600px;可控制距离顶部的高度,并不能适应全部分辨率,也不是绝对的居中,会随分辨率变动,但是600px适合于大部分分辨率。可运行测试:

code代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/79.html
目录: 网络技术 | 标签: 垂直与水平居中, div层居中 | 18423次阅读