>  기사  >  웹 프론트엔드  >  屏幕居中(DIV/CSS) 的几种方法(转)_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:29:131040검색

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">



성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.