Home  >  Article  >  Web Front-end  >  屏幕居中(DIV/CSS) 的几种方法(转)_html/css_WEB-ITnose

屏幕居中(DIV/CSS) 的几种方法(转)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:29:131040browse

1.利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小。(非标准)注意不能加声明!
  如是在标准模式下要加样式body,html{height:100%;padding:0;margin:0;}












  2.利用负边距方法,绝对定位使容器相对屏幕绝对居中,此时的被嵌套容器只能为绝对大小。(标准)根据margin负值和top left的比例控制,实现随屏幕绝对居中,容器大小改变需要重新调整margin top left的参数:


  3.老外给出的另类方法, 巧妙利用display:inline-block;IE6.0测试通过。(标准)
  注意1.height:100%是关键:2.edge与container没有嵌套关系:
  这应该算是IE的一个bug,个人对display:inline-block理解有限。edge可以看作一个填充,container现在是一个上下居中的对象,加了背景色能看的更清楚,当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素,在内部添加块级元素是不标准的逻辑。
nbsp; html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



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