前端盒子居中显示方法，前端上下左右居中-创新互联

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

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

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

代码如下：

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

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

代码如下：

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

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

代码如下：

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

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

代码如下：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。