<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DIV水平垂直居中</title> <style type="text/css"> .max_box{ position: relative; width: 500px; height: 500px; background: #ccc; border: 1px solid #999; } .min_box{ width: 200px; height: 200px; background: #fc0; border: 1px solid #f60; } /*第一种： CSS绝对定位，主要利用绝对定位，再用margin设置为auto*/ .align1{ position: absolute; top:0; right: 0; bottom: 0; left: 0; margin: auto; } /*第二种： CSS绝对定位 主要利用绝对定位，再用margin调整到中间位置。*/ .align2{ position: absolute; left: 50%; top: 50%; margin-left: -100px; /*width/-2*/ margin-top: -100px; /*height/-2*/ } /*第三种： CSS绝对定位 + Javascript/JQuery 主要利用绝对定位，再用Javascript/JQuery调整到中间位置。相比第一种方法，此方法提高了class的灵活性。 实测在IE11、FF、Chrome完美呈现 */ .align3{ position: absolute; left: 50%; top: 50%; } /*第四种： CSS3绝对定位 + 位移 使用绝对定位与CSS3的 transform: translate同样也可以达到效果。 实测在IE11、FF、Chrome完美呈现 */ .align4{ position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); } /*第五种： Flexbox: [伸缩布局盒模型] 要让元素水平垂直，对于Flexbox模型来说太容易了。 实测在IE11、FF、Chrome完美呈现 */ .align5{ display: flex; justify-content:center;/*水平居中*/ align-items:center;/*垂直居中*/ } </style> <script src="jquery-1.11.1.min.js"></script> </head> <body> <div class="max_box"> <div class="min_box align4"></div> </div> <!-- 第五种得改变结构如下 --> <!-- <div class="max_box align5"> <div class="min_box"></div> </div> --> <script type="text/javascript"> // $(function(){ // $(".align3").css({ // "margin-left":($(".align3").width()/-2), // "margin-top":($(".align3").height()/-2) // }); // }); </script> </body> </html>
几种方法的比较：
- 第一种：使用CSS绝对定位margin设置为auto，兼容性很好，应该是一种最好的方法了。
- 第二种：使用CSS绝对定位margin调整，兼容性很好但是欠缺灵活性。如果有很多box里需要水平垂直居中，因其width，height不同而需要写不同的 .align-center 。
- 第三种：使用脚本语言，兼容性很好且弥补了第一种的缺点。不因width，height的改变而影响水平垂直居中的效果。
- 第四种：使用CSS3的一些新的属性，兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好，不因width，height的改变而影响水平垂直居中的效果。
- 第五种：使用Flexbox模型，兼容Firefox、Opera 和 Chrome，IE全军覆没。也是不因width，height的改变而影响水平垂直居中的效果。