当前位置:首页 »“秋了秋”个人博客 » 网络技术 » 使元素在浏览器中通过div+css水平、垂直居中

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

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

水平居中就不说了,很容易实现,只要在样式中加入红色的body{text-align: center;}就行了,表格居中只要加个<center><table></table></center>就行了,背景图片居中在样式中加入body{background: url(//img.netblog.site/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://netblog.cn/blog/79.html
目录: 网络技术标签: 垂直与水平居中,div层居中 20346次阅读

请求播放音乐,请点击播放

登 录
点击获取验证码
还没账号?点击这里