前端盒子居中显示方法,前端上下左右居中-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

前端盒子居中显示方法,前端上下左右居中

前端布局的时候总是会遇到一些需要居中的方案,下面是我平常使用的一些方法,当然还有很多的方法也能居中显示。
1、宽高固定 – 使用绝对定位居中显示
这儿一般是用在固定的大小的box中使用,如果相对定位的box大于屏幕不建议使用。
代码如下:

纳溪网站建设公司创新互联,纳溪网站设计制作,有大型网站制作公司丰富经验。已为纳溪1000多家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的纳溪做网站的公司定做!




2、宽高固定 – 使用固定定位居中显示

固定定位主要是一些弹出层使用比较好,而且在所有的高度的文档中都可以使用。

代码如下:




3、宽高不固定 – 屏幕中间 – 使用jq来计算

有些时候咱们会遇到高度和宽度不固定的box需要居中的需求,这时候咱们可以使用js来计算box的宽高然后在控制他的margin来居中。

代码如下:



4、不固定宽高 – CSS上下左右居中 – IE7及以上

当然使用纯CSS也是可以办得到的,这个有个前提条件最外层的box必须有高度,然后可以使用display: table;来居中,如果你不想兼容低版本浏览器的话可以使用这个方法,当然这个方法亲测可以支持到IE7。

代码如下:

(www.gendan5.com)


不固定宽高 - CSS上下左右居中 - IE7及以上


不固定宽高 - CSS上下左右居中 - IE7及以上


不固定宽高 - CSS上下左右居中 - IE7及以上


不固定宽高 - CSS上下左右居中 - IE7及以上


不固定宽高 - CSS上下左右居中 - IE7及以上





5、上下左右定位法 – CSS上下左右居中 – IE7及以上

其实这个方法是我偶然发现的,当初还真是被惊到了

代码如下:



分享名称:前端盒子居中显示方法,前端上下左右居中
网址分享:http://kswsj.cn/article/gojpgd.html

其他资讯