网页页面制做 css让网页页面垂直居中对齐

2021-03-14 10:37 jianzhan
总结1下css让网页页面垂直居中对齐的方式
1.大家常见的margin:0 auto;方式
这个方式是大伙儿用的数最多的方式,应用的情况下务必为器皿制订宽度!
事例:
#main {width:960px;margin:0 auto;}
这个在绝大多数访问器里边都可以以很好的完成实际效果。

可是在IE6以前的版本号中却不被适用,下面看1下第2种方式

2. 用text-align完成垂直居中,这个方式实际上算是1个hack。
这个方式把全部网页页面作为文字对待,把body的特性设定为{text-align:center;}
这样的话网页页面全部內容所有垂直居中了,还必须把网页页面总的外框(wrap)特性{text-align:left;}
这样的话网页页面就垂直居中了!
编码:
body{text-align:center;}
wrap {text-align:left;}

3.负的外边距

负外边距必须和肯定精准定位另外应用,才会起效。
最先必须1个{wrap}来包裹全部的网页页面內容,并将其精准定位到网页页面的50%。这样{warp}器皿据访问器左侧50%的间距。

随后再用负边距,将器皿左侧距设定为{wrap}宽度的1半便可。
看编码:
#wrap {width:800px;position:absolute;left:50%;margin:0 0 0 ⑷00px;}
这样wrap就垂直居中对齐了,这个方式基础上能够适配全部的访问器了。

综上所述:第1种方式是大家大伙儿首选的处理计划方案,第2种方式实际上能够和第1种方式融合起来用更好,第3种方式是是能够适配全部的访问器,假如你对你的也网页页面适配性规定的高些,这个还可以做为你的首选哈!