当前位置: 首页 > Web前端 > CSS

CSS居中方法

时间:2023-03-31 00:12:02 CSS

刚学CSS的时候,尝试过几种居中方法。这些方法不需要JS手段。写的方法有一个原则,就是算出宽高后不用直接人为设置宽高然后实现居中,表格布局,行高设置,margin:auto等东西我就不写了.以下方法针对不同的浏览器。经测试,IE8及以下到IE9+、Safari支持的方式不同。1.标准浏览器完全兼容,内容水平居中。包装器{浮动:左;职位:相对;左:50%;清除:两者;}.wraperdiv{border:1pxsolidpalevioletred;职位:相对;左:-50%;}

Guardiola
KloppKloppKloppKloppKloeKlopp
孔蒂
穆里尼奥地利
温格
该方法的原理是让容器层和内层相对移动,容器层移动自身宽度的50%,内层移动自身宽度的-50%相对于手机的宽度。这样外层容器就可以垂直包裹内容,而且由于外层容器是浮动的,所以容器的宽度和内层的宽度是一样的,这样可以完全自适应实现居中.这种方法适用于竖排版。2.IE9+以上浏览器,垂直居中div{position:absolute;宽度:100px;高度:50px;顶部:0;右:0;底部:0;左:0;保证金:自动;背景:#f60;}
这个方法的原理不是很清楚。我是这样理解的。当div哪儿也去不了,而且margin还是auto的时候,只能相对于外部容器垂直居中..3.IE8及以下版本垂直居中。parent{height:500px;宽度:500px;font-size:438.6px;/*(font-size:width/114)*/background-color:paleturquoise;}.child{背景颜色:deepskyblue;垂直对齐:中间;缩放:1;显示:内联;宽度:50px;高度:50px;font:18px/18px"微软雅黑";}/*.child必须写font属性,这个方法只有在ie中才会实现。*/这个方法可以只能在IE8及以下实现,至今没搞明白父级为什么font-size属性一定要等于width/114?IE真是一个奇妙的存在。。。在虚拟机下测试这个方法确实有效。font-size属性孩子一定要写,即使没有内容,否则无效。为了兼容IE8以下,这个方法可以作为hack。4.IE、Safari以外的标准浏览器是指IE9及以下版本。我只测试了这几个版本的IE,Safari也不支持。.box{宽度:600px;高度:600px;边框:1px实心淡绿色;职位:相对;}.item{宽度:200px;高度:200px;边框:1px实心淡绿色;50%;变换:翻译(-50%,-50%);}容器和内层都已经脱离文档流,内层先移动50%的自身,然后通过transform属性移动自身的-50%。更正后的顶部和左侧正好位于容器的垂直中心。5.IE还不支持CSS3需要flex方法。不幸的是,Safari仍然不支持它,至少在我的测试阶段(5.1.7)窗口中是这样。#box{宽度:800px;高度:800px;显示:弹性;border:1pxsolidpalevioletred;}#boxdiv{宽度:200px;高度:200px;边框:1px实心#2189BF;:中心;对齐自我:中心;}
flex是更直接的垂直居中,justify-content:center;对齐自我:中心;这两个属性可以直接设置为center,在不支持CSS3的浏览器中是没有实现的,这也是flex暂时的不足之一。